100%最小高度CSS布局

Question

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

Answer 1

我使用以下一个: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;
}

对我来说很好.

Answer 2

要将自定义高度设置为锁定到某个位置:

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>

Answer 3

这是另一种基于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

Answer 4

kleolb02的答案看起来很不错.另一种方式是粘性页脚和最小高度黑客的组合

Answer 5

一个纯粹的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>

Answer 6

为了min-height正确使用百分比,在继承它的父节点时min-height,诀窍是将父节点高度设置为1px,然后子节点min-height将正常工作.

演示页面