212

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

这是我的演示：

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>

4

18 回答 18

118

您的问题不是 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/

于 2009-02-23T20:09:13.557 回答
58

我将尝试直接在标题中回答问题，而不是一心想将页脚粘贴到页面底部。

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

演示在（拖动框架句柄查看效果）：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 - 或者我只是太困了

于 2014-06-02T02:08:51.100 回答
19

尝试使用以下 css 规则：

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

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

于 2008-09-29T04:47:19.797 回答
6

你可以用最小高度声明来破解它

<div style="min-height: 100%">stuff</div>
于 2008-09-29T04:44:24.047 回答
3

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

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

于 2008-09-29T07:00:54.797 回答
3

虽然它不像纯 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>
于 2008-09-30T03:39:18.517 回答
3

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

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

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

于 2009-07-25T23:44:10.337 回答
3

尝试：

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

还没测试...

于 2011-03-07T23:10:28.757 回答
3

固定高度的粘性页脚：

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;
}
于 2013-08-15T08:42:15.450 回答
3

您可以将“vh”长度单位用于元素本身及其父元素的 min-height 属性。从 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;
}
于 2016-03-10T15:40:03.420 回答
2

试试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>
于 2013-08-04T06:22:37.093 回答
1

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

尝试：

html, body {
      height: 100%;
}
于 2016-08-08T08:38:24.380 回答
0

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

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

于 2008-09-29T04:46:43.650 回答
0

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

于 2008-09-29T07:19:14.610 回答
0

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

于 2009-02-23T19:29:45.663 回答
0

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

height: 100%;

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

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

于 2011-09-28T09:51:08.077 回答
0 
#content {
    height: calc(100% - the amount of pixels the content div is away from the top);
}

因此，如果您的 div 距离顶部 200px，您需要的代码将是

#content {
    height: calc(100% - 200px);
}
于 2021-09-07T12:40:08.520 回答
-2

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

于 2011-12-02T17:30:08.223 回答