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

一尘不染

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

html

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

这是我的 HTML ：

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

而我的 CSS ：

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;
}

阅读 219

2020-05-10

共1个答案

一尘不染

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

html,body { height:100%; }

您可能还需要调整填充和边距，但这将使您获得90％的效率，如果需要使其与所有浏览器一起使用，您将不得不对其进行调整。

2020-05-10