上一篇: Pure CSS复选框图像替换下一篇:使用CSS在div底部对齐按钮

css – 获取div占据100％的身高,减去固定高度的页眉和页脚

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 获取div占据100％的身高,减去固定高度的页眉和页脚，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

从我的研究，这似乎是一个绝对经典的CSS问题，但我找不到一个确定的答案 – 所以StackOverflow它是。

如何设置内容div占据身高的100％，减去固定高度的页眉和页脚占用的高度？

<body>
  <header>title etc</header>
  <div id="content">body content</div>
  <footer>copyright etc</footer>
</body>

//CSS
html,body { 
  height: 100%;
}
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: 100% of the body height,minus header & footer
}

我想使用纯CSS，并为答案是跨浏览器的防弹。

解决方法

这个版本将工作在所有最新的浏览器和ie8如果你有modernizr脚本(如果不只是更改页眉和页脚到div)： http://jsfiddle.net/naqE6/1/

html

<div id="wrapper">
    <header>dfs</header>
    <div id="content">
    </div>
    <footer>sdf</footer>
</div>

css

html,body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%; BACkground-color:green;}
header {margin-top:-50px; height:50px; BACkground-color:red;}
footer {margin-bottom:-50px; height:50px; BACkground-color:red;}
p {margin:0; padding:0 0 1em 0;}