100% 最小高度 CSS 布局

使元素的最小高度为100% 的最佳方法是什么 浏览器种类繁多？

特别是如果你有一个固定 height的 header和 footer的布局,

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

298442 次浏览
小开

我正在使用以下一个: CSS 布局-100% 高度

最低身高

这个页面的 # Container 元素的 min-height 为100% 方法，如果内容需要比视口提供的更高的高度, 内容的高度迫使容器也变长。 然后可以通过背景将 # content 中可能的列可视化 Div 不是表单元格，您不需要(或 想)的物理元素，以创造这样的视觉效果。如果你是 还没有被说服; 考虑不稳定的线条和梯度而不是 直线和简单的配色方案。

相对定位

因为 # Container 有一个相对位置，所以 # footer 将始终保留 在它的底部; 因为上面提到的最小高度不能阻止 即使(或者特别是当) # 内容强迫 # 容器变得更长时，这也会起作用。

垫底

因为它不再在正常的流程中，填充-底部的 # 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;
}

我觉得挺好的。

小开

Kleolb02的答案看起来相当不错。另一种方法是 黏黏的鞋底和 最小高度黑客的组合

小开

纯 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>
小开

你可以试试这个: < a href = “ http://www.Monkey-business.biz/88/level-zentriertes-100-hohe-css-layp/”rel = “ nofollow norefrer”> http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ 那是100% 的高度和水平中心。

小开

试试这个:

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

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

小开

将自定义高度锁定到某处:

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>

小开

分享我用过的东西，效果很好

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

我同意 Levik，因为父容器被设置为100% 如果你有侧边栏并且想要它们填充空间来与页脚相接，你不能将它们设置为100% ，因为它们也将是父容器高度的100% ，这意味着页脚在使用 clear 函数时会被下推。

如果你的页眉高度是50px，页脚高度是50px，内容只是自动适应剩余的空间，比如说100px，页面容器是这个值的100% ，它的高度是200px。然后，当你设置侧边栏高度为100% ，那么它是200像素，即使它应该适合之间的头部和脚部。相反，它最终是50px + 200px + 50px，所以页面现在是300px，因为侧栏被设置为与页面容器相同的高度。在页面的内容中会有一个很大的空白。

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

小开

首先，您应该在 content div 之后用 id='footer'创建一个 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;
}
小开

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

演示页面

小开

可能是最短的解决方案(只适用于现代浏览器)

这一小段 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; }
小开

正如 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);
}
小开

下面是另一个基于 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
小开

如指定的 MDN 文档中的 height 属性，它不是继承的。所以你需要设置为100% 。众所周知，任何网页都以 html 开始，然后以 body 作为子元素，您需要在这两个元素中都设置 身高: 100% 。

html,
body {
height: 100%;
}


<html>
<body>


</body>
</html>

任何标有100% 身高的孩子将是父母身高100的一部分。在上面的示例样式中，我们将 html 标记设置为100% ，它将是可用屏幕高度的全高。然后 body 是100% ，因此它也是全高，因为它的父元素是 html。


提交答案