100％最小高度CSS布局

Question

在各种浏览器中使最小高度为100％的元素的最佳方法是什么？特别是如果您的页眉和页脚固定高度的布局，如何使中间内容部分填充页脚固定在底部之间的100％的空间？

Answer 1

我正在使用以下代码：CSS布局-100％的高度最小身高此页面的#container元素的最小高度为100％。这样，如果内容所需的高度大于视口提供的高度，则#content的高度也会强制#container变长。然后，可以使用#container上的背景图像将#content中的可能列可视化；div不是表单元格，并且您不需要（或不需要）物理元素来创建这种视觉效果。如果您尚未确信；认为抖动的线条和渐变，而不是直线和简单的配色方案。相对定位由于#container具有相对位置，因此#footer将始终保留在其底部；由于上述最小高度不会阻止#container缩放，即使#content强制#container变长，这也将起作用。底部填充由于不再存在于常规流程中，因此#content的填充底部现在为绝对的#footer提供了空间。默认情况下，此高度包含在滚动高度中，因此页脚永远不会与上述内容重叠。稍微调整文本大小或调整浏览器窗口大小以测试此布局。html,body {    margin:0;    padding:0;    height:100%; /* needed for container min-height */    background:gray;    font-family:arial,sans-serif;    font-size:small;    color:#666;}h1 {     font:1.5em georgia,serif;     margin:0.5em 0;}h2 {    font:1.25em georgia,serif;     margin:0 0 0.5em;}    h1, h2, a {        color:orange;    }p {     line-height:1.5;     margin:0 0 1em;}div#container {    position:relative; /* needed for footer positioning*/    margin:0 auto; /* center, not in IE5 */    width:750px;    background:#f0f0f0;    height:auto !important; /* real browsers */    height:100%; /* IE6: treaded as min-height*/    min-height:100%; /* real browsers */}div#header {    padding:1em;    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;    border-bottom:6px double gray;}    div#header p {        font-style:italic;        font-size:1.1em;        margin:0;    }div#content {    padding:1em 1em 5em; /* bottom padding for footer */}    div#content p {        text-align:justify;        padding:0 1em;    }div#footer {    position:absolute;    width:100%;    bottom:0; /* stick to bottom */    background:#ddd;    border-top:6px double gray;}div#footer p {    padding:1em;    margin:0;}对我来说很好。

Answer 2

要将自定义高度设置为锁定在某处：body, html {&nbsp; height: 100%;}#outerbox {&nbsp; width: 100%;&nbsp; position: absolute; /* to place it somewhere on the screen */&nbsp; top: 130px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/* free space at top */&nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* makes it lock to the bottom */}#innerbox {&nbsp; width: 100%;&nbsp; position: absolute; &nbsp; min-height: 100% !important; /* browser fill */&nbsp; height: auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*content fill */}<div id="outerbox">&nbsp; <div id="innerbox"></div></div>