Question

我目前正在尝试在顶部构建一个带有固定高度（100px）横幅的网站，我希望其余内容能够填充页面的其余部分。我有它，所以我的横幅是在div中，而页面的其余部分在另一个div中，我希望页面的其余部分高度减去100px（100％ - 100px）。显然，在高度方面你不能混用％和px。但是，是否可以将变量定义为寡妇高度（100％）减去横幅高度（100px），然后使用它来定义剩余div的高度。

我是css，html的新手，几乎不懂任何其他语言，所以请尽量保持简单，因为我是一个简单的人！

Answer 1

高度是动态的，因此当你向“内容部分”添加内容时，持有它的contianer的大小也是如此。

简短的回答是，不要为“内容部分”设置高度。

Answer 2

<div style="height: 100px">
   Your banner
</div>
<div>
  Body
</div>

Answer 3

您可以使用100％作为内容div的高度 - 它会拉伸以占用横幅到屏幕底部的空间。

一个重要的部分是将html和body的高度设置为100％：

<强> HTML

<html>
    <head>
        <title>Foo</title>
    </head>

    <body>
        <div id="banner"></div>
        <div id="content"></div>
    </body>
</html>

<强> CSS

#banner {
    height: 100px;
    background-color: #ccc;
}

#content {
    height: 100%;
    background-color: #000;
}

body {
    height: 100%;
}

html {
    height: 100%;
}

在此处查看演示：http://jsfiddle.net/yHFjh/

Answer 4

创建height 100％的html和正文。将横幅置于绝对位置。在横幅下方添加内容div，并将其设置为min-height为100％。此内容将位于横幅后面，但至少为100％。在内容中添加一个div，其横幅高度为padding-top，以防止内容最终落在横幅下方。

HTML：

<div id="banner"></div>
<div id="content">
    <div id="main">
        Lorem Ipsum is simply dummy text..
    </div>
</div>

CSS：

html, body { height: 100%; }
#banner { position: absolute; height: 100px; width: 100%; background: green; }
#content { min-height: 100%; background: yellow; }
#main { padding-top: 100px; }

http://fiddle.jshell.net/pY6dc/

Answer 5

使用window.innerHeight / document.documentElement.clientHeight属性

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

<script>
    if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
        document.getElementById("content").style.height = document.documentElement.clientHeight - document.getElementById("banner").offsetHeight + "px";
    } else {
        document.getElementById("content").style.height = window.innerHeight - document.getElementById("banner").offsetHeight + "px";
    }
</script>

浏览器窗口和分区的高度

5 个答案: