CSS：在固定高度或宽度的情况下填充空白处

发布于 2024-10-18 00:31:07 字数 456 浏览 7 评论 0原文

该解决方案不需要所有浏览器都支持。

<div id="page">
  <div id="header">&nbsp;</div>
  <div id="content">&nbsp;</div>
  <div id="footer">&nbsp;</div>
</div>

让我们来看看。页面得到宽度：100％；高度：100％。标题和内容都有 width:100% （这是否是必需的？），但它们的高度是固定的，比如说 height: 200px 和 height: 500px< /代码>。现在我希望页脚填充页面的其余部分。

有什么解决办法吗？

感谢您的帮助。

原文

The solution doesn't need to be supported by all browsers.

<div id="page">
  <div id="header"> </div>
  <div id="content"> </div>
  <div id="footer"> </div>
</div>

Let's see. page got width:100%;height:100%. header and content got both width:100% (is this required anyway?), but they got fixed heights, let's say height: 200px and height: 500px. Now I want the footer to fill the rest of the page.

Any solution for that?

Thanks for your help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗梦空间 2024-10-25 00:31:07

你可以使用这样的东西：

html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}

事实上，你为#footer设置了position:absolute，并为top指定了700px的值； #header 和 #content 以及 bottom:0 的总高度，因此将填充空白空间。

演示：http://jsbin.com/icuza3/2

you could use something like this:

html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}

in fact you set position:absolute for #footer and give a value for top 700px; the total height of #header and #content and bottom:0 so will fill the empty space.

Demo: http://jsbin.com/icuza3/2

回复收藏 0 原文