浏览器窗口和div的高度

我目前正在尝试在顶部创建一个固定高度（100px）横幅的网站，并且我希望其余内容填充页面的其余部分。我拥有它，因此我的横幅位于div中，其余部分位于另一个div中，并且我希望页面的其余部分的高度小于100px（100％ - 100px）。显然，当涉及到身高时，你不能混合使用％和px。但是，是否可以将变量定义为wid高（100％）减去横幅高度（100px），然后使用它来定义剩余div的高度。浏览器窗口和div的高度

我是新来的CSS，HTML和几乎不知道任何其他语言，所以请尽量保持答案简单，因为我是一个简单的人！

来源

2012-09-27 David Ward

当你说你需要定义日是什么意思高度为100％-100像素？其中一个是最小的，另一个是最大的？ – thatidiotguy

我相信这与其他[问题] [1]是一样的。 [1]：http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – Ozzyberto

感谢您对您的所有响应。 Ozzyberto链接到另一个线程导致我将每个侧面菜单和内容div设置为'position：fixed'，并且具有以下设置'top：100px;底部：0;'。他们坐在我身体里面，身高100％，身高100％。 –

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

来源

2012-09-27 20:25:31 HelloWorld

高度是动态的，所以当你添加内容到你的“内容部分”时，持有它的对象的大小也是如此。

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

来源

2012-09-27 20:26:15

不幸的是，不设置高度不起作用。但是，我找到了一个解决方案（请参阅我最初的问题后的评论）。 –

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

的一个重要部分是HTML和身体的高度设置为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-27 20:29:35 Jim

你的内容是100％不是100％-100px –

啊，你是对的......看来我误解了这个问题...... – Jim

创建一个html和height 100％的正文。将横幅定位绝对。在横幅下方添加内容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; }

来源

2012-09-27 20:34:19

使用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-27 20:35:24

浏览器窗口和div的高度

回答

相关问题