3

我目前正在尝试建立一个顶部固定高度（100px）横幅的网站，我希望其余的内容填满页面的其余部分。我有它，这样我的横幅就在一个 div 中，页面的其余部分在另一个 div 中，我希望页面的其余部分的高度小于 100 像素（100% - 100 像素）。显然，当涉及高度时，您不能混合使用 % 和 px 。但是，是否可以将变量定义为寡妇高度 (100%) 减去横幅高度 (100px)，然后使用它来定义我剩余 div 的高度。

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

4

5 回答 5

2

高度是动态的，因此当您将内容添加到“内容部分”时，持有它的容器的大小也会如此。

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

于 2012-09-27T20:26:15.813 回答
0

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

于 2012-09-27T20:29:35.170 回答
0 
<div style="height: 100px">
   Your banner
</div>
<div>
  Body
</div>
于 2012-09-27T20:25:31.137 回答
0

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

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/

于 2012-09-27T20:34:19.493 回答
0

使用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>
于 2012-09-27T20:35:24.893 回答