100％最小高度CSS布局 [英] 100% Min Height CSS layout

问题描述

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

解决方案

我使用下面的一个： CSS布局 - 100％高度

最小高度
$ b

此页面的#container元素的最小高度为100％。那
的方式，如果内容需要更多的高度比视口提供，
的高度#content力#container也变得更长。
#content中的可能列可以通过#container上的背景
映像可视化; div不是表单元格，并且你不需要（或
想要）的物理元素来创建这样的视觉效果。如果你是
尚未说服;认为摆动的线条和渐变，而不是
直线和简单的配色方案。

相对定位

因为#container有相对位置，#footer会总是保持
在它的底部;因为上面提到的最小高度不能防止
#container从缩放，这将工作，即使（或更确切地说，当）#content力#container变得更长。

填充底部

由于已不在正常流程， padding-bottom of #content
现在为绝对#footer提供了空间。默认情况下，此填充是
包括在滚动高度中，因此页脚将
从不与上述内容重叠。

缩放文本大小a位或调整浏览器窗口以测试此
布局。

  html，body {
 margin：0 ; 
 padding：0; 
 height：100％; / *容器最小高度需要* / 
 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; / *页脚定位所需* / 
 margin：0 auto; / * center，不在IE5 * / 
 width：750px; 
 background：＃f0f0f0; 
 
 height：auto！important; / * real browsers * / 
 height：100％; / * IE6：作为最小高度* / 
 
最小高度：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; 
} 
  

适合我。

What's the best way to make an element of 100% minimum height across a wide range of browsers ? In particular if you have a layout with a header and footer of fixed height how do you make the middle content part fill 100% of the space in between with the footer fixed to the bottom ?

解决方案

I am using the following one: CSS Layout - 100 % height

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 fysical 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;
}

Works fine for me.

这篇关于100％最小高度CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！