我如何迫使一个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>

当前回答

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

2009-02-23 19:29:45

其他回答

Try:

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-07 23:10:28

试试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-04 06:22:37

不是所有浏览器都支持min-height属性。如果你需要你的#content在较长的页面上扩展它的高度，height属性会缩短它。

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

2008-09-29 07:00:54

您可以使用“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

#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-07 12:40:08

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

推荐文章

最新文章

标签