100％最小高度CSS布局
时间：2020-03-05 18:42:37 来源:igfitidea点击:
在各种浏览器中使最小高度为100％的元素的最佳方法是什么？特别是如果页眉和页脚固定高度的布局，如何使中间内容部分填充页脚固定在底部之间的100％的空间？
解决方案
回答
我正在使用以下代码：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.
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的答案看起来不错。另一种方式是粘页脚和最小高度hack
回答
纯粹的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>
回答
我们可以尝试以下方法：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。
