Html 100% 最小高度 CSS 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% Min Height CSS layout
提问by Chris Porter
What's the best way to make an element of 100% minimum height across a wide range of browsers ?
在各种浏览器中制作 100% 最小高度的元素的最佳方法是什么？
In particular if you have a layout with a headerand footerof fixed height,
特别是如果你有一个布局与header和footer固定height，
how do you make the middle content part fill 100%of the space in between with the footerfixed to the bottom ?
你如何使中间内容部分填充100%之间的空间并footer固定到底部？
回答by ollifant
I am using the following one: CSS Layout - 100 % height
我正在使用以下一个：CSS 布局 - 100 % 高度
Min-height
The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the physical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
Relative positioning
Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
Padding-bottom
Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
Scale the text size a bit or resize your browser window to test this layout.
最小高度
此页面的#container 元素的最小高度为 100%。这样，如果内容需要的高度超过视口提供的高度，#content 的高度也会迫使 #container 变得更长。然后可以使用#container 上的背景图像可视化#content 中可能的列；div 不是表格单元格，您不需要（或想要）物理元素来创建这样的视觉效果。如果你还不相信；想想摇摆不定的线条和渐变，而不是直线和简单的配色方案。
相对定位
因为#container 有一个相对位置，所以#footer 会一直停留在它的底部；由于上面提到的 min-height 不会阻止 #container 缩放，因此即使（或者尤其是当）#content 强制 #container 变长时，这也会起作用。
垫底
由于它不再处于正常流程中，#content 的 padding-bottom 现在为绝对 #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;
}
Works fine for me.
对我来说很好用。
回答by Chris
To set a custom height locked to somewhere:
要设置锁定到某处的自定义高度：
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>回答by Stanislav
Here is another solution based on vh, or viewpoint height, for details visit CSS units. It is based on this solution, which uses flex instead.
这是另一种基于CSS 单元的解决方案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>The units are vw , vh, vmax, vmin. Basically, each unit is equal to 1% of viewport size. So, as the viewport changes, the browser computes that value and adjusts accordingly.
单位是 vw , vh, vmax, vmin。基本上，每个单元等于视口大小的 1%。因此，随着视口的变化，浏览器会计算该值并相应地进行调整。
You may find more information here:
Specifically:
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
具体来说：
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
回答by henrikpp
kleolb02's answer looks pretty good. another way would be a combination of the sticky footerand the min-height hack
回答by levik
A pure CSSsolution (#content { min-height: 100%; }) will work in a lot of cases, but not in all of them - especially IE6 and IE7.
纯粹的CSS解决方案 ( #content { min-height: 100%; }) 将适用于很多情况，但并非适用于所有情况 - 特别是 IE6 和 IE7。
Unfortunately, you will need to resort to a JavaScript solution in order to get the desired behavior.
This can be done by calculating the desired height for your content <div>and setting it as a CSS property in a function:
不幸的是，您需要求助于 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';
}
You can then set this function as a handler for onLoadand onResizeevents:
然后，您可以将此函数设置为onLoad和onResize事件的处理程序：
<body onload="resizeContent()" onresize="resizeContent()">
. . .
</body>
回答by vsync
回答by Clint
I agree with Levik as the parent container is set to 100% if you have sidebars and want them to fill the space to meet up with the footer you cannot set them to 100% because they will be 100 percent of the parent height as well which means that the footer ends up getting pushed down when using the clear function.
我同意 Levik，因为如果您有侧边栏并希望它们填充空间以与页脚相遇，则父容器设置为 100%，您不能将它们设置为 100%，因为它们也是父高度的 100%意味着在使用清除功能时，页脚最终会被推下。
Think of it this way if your header is say 50px height and your footer is 50px height and the content is just autofitted to the remaining space say 100px for example and the page container is 100% of this value its height will be 200px. Then when you set the sidebar height to 100% it is then 200px even though it is supposed to fit snug in between the header and footer. Instead it ends up being 50px + 200px + 50px so the page is now 300px because the sidebars are set to the same height as the page container. There will be a big white space in the contents of the page.
如果您的页眉高度为 50 像素，而页脚高度为 50 像素，并且内容只是自动调整到剩余空间，例如 100 像素，并且页面容器是该值的 100%，那么它的高度将为 200 像素。然后，当您将侧边栏高度设置为 100% 时，即使它应该紧贴在页眉和页脚之间，它也是 200px。相反，它最终是 50px + 200px + 50px，所以页面现在是 300px，因为侧边栏设置为与页面容器相同的高度。页面内容中会有很大的空白。
I am using internet Explorer 9 and this is what I am getting as the effect when using this 100% method. I havent tried it in other browsers and I assume that it may work in some of the other options. but it will not be universal.
我正在使用 Internet Explorer 9，这就是我在使用这种 100% 方法时得到的效果。我还没有在其他浏览器中尝试过，我认为它可能适用于其他一些选项。但它不会是普遍的。
回答by Afshin Mehrabani
First you should create a divwith id='footer'after your contentdiv and then simply do this.
首先，您应该在div之后创建一个divwith ，然后简单地执行此操作。id='footer'content
Your HTML should look like this:
您的 HTML 应如下所示：
<html>
<body>
<div id="content">
...
</div>
<div id="footer"></div>
</body>
</html>
And the CSS:
和 CSS：
?html, body {
height: 100%;
}
#content {
height: 100%;
}
#footer {
clear: both;
}
回答by Konstantin Smolyanin
Probably the shortest solution (works only in modern browsers)
可能是最短的解决方案（仅适用于现代浏览器）
This small piece of CSS makes "the middle content part fill 100% of the space in between with the footer fixed to the bottom":
这一小段 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); }
the only requirement is that you need to have a fixed height footer.
唯一的要求是你需要有一个固定高度的页脚。
For example for this layout:
例如对于这种布局：
<html><head></head><body>
<main> your main content </main>
</footer> your footer content </footer>
</body></html>
you need this CSS:
你需要这个 CSS：
html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }
回答by MilanBSD
Try this:
尝试这个：
body{ height: 100%; }
#content {
min-height: 500px;
height: 100%;
}
#footer {
height: 100px;
clear: both !important;
}
The divelement below the content div must have clear:both.
该div内容的div元素下面必须有clear:both。
