即使没有内容，如何强制 DIV 块扩展到页面底部？答案

【问题标题】：How do I force a DIV block to extend to the bottom of a page even if it has no content?即使没有内容，如何强制 DIV 块扩展到页面底部？
【发布时间】：2010-09-13 22:26:41
【问题描述】：

在下面显示的标记中，我试图让内容 div 一直拉伸到页面底部，但只有在有内容要显示时才会拉伸。我想这样做的原因是即使没有任何内容要显示，垂直边框仍然会出现在页面下方。

这是我的DEMO：

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}

<form id="form1">
  <div id="header">
      <a title="Home" href="index.html" />
  </div>

  <div id="menuwrapper">
      <div id="menu">
      </div>
  </div>

  <div id="content">
  </div>
</form>

【问题讨论】：

如果页面内容更多，您希望它做什么？你关心什么浏览器？

标签： css html border

【解决方案1】：

我会尝试直接在标题中回答问题，而不是一心想在页面底部添加页脚。

如果没有足够的内容来填充可用的垂直浏览器视口，则使 div 扩展到页面底部：

Demo at（拖动框架句柄查看效果）：http://jsfiddle.net/NN7ky
（优点：干净，简单。缺点：需要 flexbox - http://caniuse.com/flexbox）

HTML：

<body>
  
  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>
  
  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>
  
</body>

CSS：

* { padding: 0; margin: 0; }

html, body {
  height: 100%;
  
  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - 或者我只是太困了

【讨论】：

我们中的一些人很幸运只支持“现代”浏览器，所以这对我来说非常有用。谢谢吉玛。我尝试了几种方法来做这样的事情，但它总是以各种微妙的方式被打破。这要好得多。仍然不完全明白为什么它会这样工作。
Flexbox 元素尝试在其中的元素之间划分其内容区域。我提供的解决方案通过 1) 拒绝 div 的缩小，以及 2) 允许 .div2 的增长。因此 div 不会缩小以隐藏其内容，仅允许扩展 .div2。
所以这解决了我在 Firefox 中遇到的问题，其中内容对于浏览器来说仍然有点太大。不幸的是，在 Chrome 中，仅此一项并不能解决该问题。但是，也可以将边距和填充设置为 0。
这是正确答案，min-height: 100% 仅在父容器中没有其他内容时才有效，如果扩展元素上方的兄弟元素高度未知，则 calc 并没有真正的帮助跨度>
在解决这个问题数小时后，这是唯一真正为我解决问题的解决方案。只是缺少对每个部分的作用的一点解释。但无论如何，非常感谢@Gima。

【解决方案2】：

#content {
    height: calc(100% - the amount of pixels the content div is away from the top);
}

所以如果你的 div 距离顶部 200px，你需要的代码是

#content {
    height: calc(100% - 200px);
}

【讨论】：

【解决方案3】：

试试http://mystrd.at/modern-clean-css-sticky-footer/

上面的链接失效了，但是这个链接https://stackoverflow.com/a/18066619/1944643是可以的。 :D

演示：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>

【讨论】：

@codemirror 谢谢，我刚刚用另一个有效的链接编辑了评论。

【解决方案4】：

您的问题不是 div 不是 100% 高度，而是它周围的容器不是。这将有助于我怀疑您正在使用的浏览器：

html,body { height:100%; }

您可能还需要调整内边距和边距，但这将使您完成 90% 的工作。如果您需要使其适用于所有浏览器，您将不得不稍微调整一下。

这个网站有一些很好的例子：

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

我也推荐去http://quirksmode.org/

【讨论】：

此解决方案对滚动页面不友好。
CSS 中的 min-height 属性应该可以帮助他...我猜
有趣的是，这解决了我的滚动问题，而不是导致它们
在最新版本的 chrome 中对我不起作用。
对于 React 应用程序，我也必须使用 '#root'。

【解决方案5】：

我认为只要让 html 填充 100% 也可以解决问题，可能是 body 填充了 100% 的 html，但 html 没有填充 100% 的屏幕。

尝试：

html, body {
      height: 100%;
}

【讨论】：

【解决方案6】：

您可以为元素本身及其父元素的最小高度属性使用“vh”长度单位。从 IE9 开始支持：

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS：

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}

【讨论】：

这只会将 div 拉伸到视口的高度，而不是页面本身。

【解决方案7】：

尝试使用以下 css 规则：

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

更改高度以适合您的页面。为了跨浏览器的兼容性，两次提到了高度。

【讨论】：

这行得通，但我发现如果我将 min-height 增加到超过 600px，它会创建一个滚动。你知道为什么会这样吗？
@SiddharthPatel 因为#content div 溢出了它的父级。因此，将#content div 的父级设置为具有overflow:auto 或overflow:hidden css 值，它应该扩展/溢出以适应，而不是滚动。下次提出新问题而不是 cmets 可能会更好:)
在尝试了每个答案的方法后，这是唯一有效的方法。即使这样也能完美运行，因为我必须调整高度值以匹配页面的高度，所以需要调整。但是，它对所有浏览器都同样有效。
非常感谢您的回答。它很简单，并且在多个平台上运行良好。大约 1 年前，我实际上在没有意识到的情况下使用过这个，希望我能投票两次。

【解决方案8】：

固定高度的粘性页脚：

HTML 方案：

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS：

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}

【讨论】：

【解决方案9】：

试试：

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

还没有测试...

【讨论】：

【解决方案10】：

我知道这不是最好的方法，但如果不弄乱我的标题、菜单等位置，我就无法弄清楚。所以....我为这两个列使用了一个表格。这是一个快速修复。不需要 JS ;)

【讨论】：

【解决方案11】：

仅使用样式表 (CSS) 是不可能做到这一点的。部分浏览器不接受

height: 100%;

作为比浏览器窗口的视点更高的值。

Javascript 是最简单的跨浏览器解决方案，尽管如前所述，不是一个干净或漂亮的解决方案。

【讨论】：

【解决方案12】：

试试 Ryan Fait 的“粘滞页脚”解决方案，

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

适用于 IE、Firefox、Chrome、Safari 和 Opera，但还没有测试过。这是一个很好的解决方案。实施起来非常简单可靠。

【讨论】：

链接失效！链接失效！
这是我们堕落的兄弟们?
L I N K

【解决方案13】：

根据您的布局工作方式，您可能会在 <html> 元素上设置背景，该元素始终至少是视口的高度。

【讨论】：

【解决方案14】：

虽然它不像纯 CSS 那样优雅，但一点点 javascript 可以帮助实现这一点：

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

【讨论】：

【解决方案15】：

我没有代码，但我知道我曾经使用 height:1000px 和 margin-bottom: -1000px;试试看。

【讨论】：

哇，这确实有效！但是如果内容溢出容器，就看不到溢出的部分了……

【解决方案16】：

并非所有浏览器都支持 min-height 属性。如果您需要 #content 在较长的页面上扩展其高度，height 属性会将其缩短。

这有点小技巧，但您可以添加一个空的 div，其宽度为 1px，高度为例如#content div 内的 1000 像素。这将强制内容至少为 1000px 高，并且仍然允许更长的内容在需要时扩展高度

【讨论】：

【解决方案17】：

你也可能喜欢这个：http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

这不是您所要求的，但它也可能满足您的需求。

【讨论】：

【解决方案18】：

你可以用min-height 声明来破解它

<div style="min-height: 100%">stuff</div>

【讨论】：