我如何迫使一个DIV块扩展到一个页面的底部，即使它没有内容?

在下面所示的标记中，我试图让内容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>

当前回答

我没有代码，但我知道我这样做了一次使用高度:1000px和margin-bottom: -1000px的组合;试试。

2008-09-29 07:19:14

其他回答

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

height: 100%;

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

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

2011-09-28 09:51:08

我认为这个问题会被修复，只是让html填充100%，可能是body 100%地填满了HTML但HTML并没有100%地填满屏幕。

试一试:

html, body {
      height: 100%;
}

2016-08-08 08:38:24

您可以使用“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-10 15:40:03

我没有代码，但我知道我这样做了一次使用高度:1000px和margin-bottom: -1000px的组合;试试。

2008-09-29 07:19:14

我知道这不是最好的方法，但是如果不搞乱我的标题、菜单等位置，我就无法解决这个问题。所以…我用一张桌子放这两列。这是个权宜之计。不需要JS;)

2011-12-02 17:30:08

我如何迫使一个DIV块扩展到一个页面的底部，即使它没有内容?

推荐文章

最新文章

标签