Question

这可能是一个非常虚假的问题，请不要对我嗤之以鼻：）

考虑使用这样的HTML：

<div class="container">
    <div class="header">
    </div>
    <div class="body">
    </div>
    <div class="footer">
    </div>
</div>

我希望'header'和'footer'分别锚定到父的顶部和底部，并且'body'可以轻松地增长以适应所有可用空间。 CSS会是什么样的呢？

编辑：也许我说错了（我不是一个网络开发人员:)），但我需要的是将div的某些部分始终附加到底部。所以当div增长时，这个部分（可能有一个固定的大小）会随着div的低端而降低。但所有这些并不意味着将div附加到浏览器窗口的底部。

Answer 1

如果我理解你的问题，你需要一些非常基本的CSS。

body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }

你的div没有漂浮，所以会像煎饼一样堆叠在一起。

如果您希望页脚“粘”，请参阅此处获取解决方案... http://ryanfait.com/sticky-footer/

Answer 2

你走了：

Example page - footer sticks to bottom

这将使内容正确
页脚和标题之间。
没有重叠。

HTML

<header>HEADER</header>
<article>
  <p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>

CSS

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{ 
  content:''; 
  display:block; 
  height:100px; // compensate Footer's height
} 

header{ height:50px; }

footer{ 
  position:absolute; 
  bottom:0; 
  width:100%; 
  height:100px; // height of your Footer (unfortunately it must be defined)
}

Answer 3

试试这个：在父div上设置position: relative。在内部div上设置position: absolute并将设置为顶部和底部属性;不要设置高度。根据需要，内部div应与父级垂直延伸。（不幸的是，在IE6及以下版本不起作用。）

DIV锚定在父div的顶部和底部

3 个答案:

HTML

CSS