100％最小高度CSS布局

在各种浏览器中使最小高度为100％的元素的最佳方法是什么？

特别是如果您的布局中带有header和footer的固定值height，

如何使中间内容部分填充到底部固定的中间100%空间footer？

我正在使用以下代码：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;
}

对我来说很好。

要将自定义高度设置为锁定在某处：

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

这是基于另一种解决方案vh，或者viewpoint height，对于详情，请访问CSS单位。它基于此解决方案，而改用flex。

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

单位是vw，vh，vmax，vmin。基本上，每个单位等于视口大小的1％。因此，随着视口的更改，浏览器将计算该值并进行相应的调整。

您可以在此处找到更多信息：

特别：

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

kleolb02的答案看起来不错。另一种方式是粘页脚和最小高度hack

为了min-height正确地使用百分比，在继承父节点的同时min-height，技巧是将父节点的高度设置为1px，然后子节点的高度min-height将正确工作。

演示页面

纯CSS解决方案（#content { min-height: 100%; }）在很多情况下都可以使用，但并非在所有情况下都有效-尤其是IE6和IE7。

不幸的是，您将需要求助于JavaScript解决方案才能获得所需的行为。这可以通过计算内容的所需高度<div>并将其设置为函数中的CSS属性来完成：

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

然后可以将此函数设置为onLoad和onResize事件的处理程序：

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

我同意Levik，因为如果您有侧边栏，并且要将它们填充空间以与页脚配合，则将父容器设置为100％，则不能将它们设置为100％，因为它们也将是父高度的100％表示使用清除功能时页脚最终会被压下。

如果您的标题是50px高度，而页脚是50px高度，而内容只是自动适应剩余空间（例如100px），而页面容器是此值的100％，则其高度将是200px。然后，当您将边栏高度设置为100％时，即使应该在页眉和页脚之间紧贴，也就是200px。相反，它最终为50px + 200px + 50px，因此页面现在为300px，因为侧边栏设置为与页面容器相同的高度。页面内容中将有很大的空白。

我正在使用Internet Explorer 9，这就是使用此100％方法时所获得的效果。我还没有在其他浏览器中尝试过它，我认为它可能在其他一些选项中也可以工作。但它不会是普遍的。

首先，你应该建立一个div与id='footer'后您的content div，然后只需执行此操作即可。

您的HTML应该如下所示：

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

和CSS：

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

可能是最短的解决方案（仅适用于现代浏览器）

这小段CSS使"the middle content part fill 100% of the space in between with the footer fixed to the bottom"：

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

唯一的要求是您需要有一个固定高度的页脚。

例如此布局：

<html><head></head><body>
  <main> your main content </main>
  </footer> your footer content </footer>
</body></html>

您需要以下CSS：

html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }

试试这个：

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

该div内容的div元素下面必须有clear:both。

您可以尝试以下方法：http : //www.monkey-business.biz/88/horizo​​ntal-zentriertes-100-hohe-css-layout/ 这是100％的高度和水平中心。

只是分享我曾经使用过的东西，并且效果很好

#content{
        height: auto;
        min-height:350px;
}

如Afshin Mehrabani的回答中所述，您应该将body和html的高度设置为100％，但要在此处获得页脚，请计算包装器的高度：

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}