100% 最小高度 CSS 布局

Question

在各种浏览器中制作 100% 最小高度的元素的最佳方法是什么？

特别是如果您的布局具有固定height的header和footer ，

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

Answer 1

我正在使用以下一个： CSS Layout - 100 % height

最小高度

此页面的#container 元素的最小高度为 100%。 这样，如果内容需要的高度超过视口提供的高度，#content 的高度也会迫使 #container 变得更长。 然后可以使用#container 上的背景图像来可视化#content 中可能的列； div 不是表格单元格，您不需要（或不希望）物理元素来创建这样的视觉效果。 如果你还不相信； 考虑摇摆不定的线条和渐变，而不是直线和简单的配色方案。

相对定位

因为#container 有一个相对位置，所以#footer 会一直保持在它的底部； 由于上面提到的最小高度不会阻止#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;
}

对我来说很好。

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

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

演示页面

Answer 6

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

我同意 Levik 的观点，因为如果您有侧边栏并希望它们填充空间以与页脚相遇，则父容器设置为 100%，您不能将它们设置为 100%，因为它们也将是父容器高度的 100%，这意味着当使用 clear 函数时，页脚最终会被向下推。

如果你的页眉是 50px 高度，而你的页脚是 50px 高度，并且内容只是自动调整到剩余空间，比如 100px，并且页面容器是这个值的 100%，它的高度将是 200px，那么可以这样想。 然后，当您将侧边栏高度设置为 100% 时，即使它应该紧贴在页眉和页脚之间，它也是 200 像素。 相反，它最终是 50px + 200px + 50px 所以页面现在是 300px 因为侧边栏设置为与页面容器相同的高度。 页面内容会有很大的空白。

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

Answer 8

首先，您应该在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;        
}

Answer 9

可能是最短的解决方案（仅适用于现代浏览器）

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

Answer 10

尝试这个：

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

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

Answer 11

你可以试试这个： http ://www.monkey-business.biz/88/horizo​​ntal-zentriertes-100-hohe-css-layout/ 那是 100% 的高度和水平中心。

Answer 12

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

Answer 13

正如MDN 文档中指定的 height 属性，它不是继承的。 因此，您需要将其设置为 100%。 众所周知，任何网页都以 html 开头，然后将 body 作为其子项，您需要在两者中设置height: 100% 。

html,
   body {
     height: 100%;
   }

<html>
  <body>

  </body>
</html>

任何标有身高 100% 的孩子都将是父母身高 100 的一部分。 在上面的示例样式中，我们将 html 标签设置为 100%，它将是可用屏幕高度的全高。 那么 body 是 100%，所以它也是全高，因为它的父级是 html。

Answer 14

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

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