所以。我的代码类似于
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
我在标题中设置了一个 svg，以便它与窗口的宽度和高度比例相匹配以保留 svg。然后我将页面的其余部分放在另一个 div 中。我希望这样页面不会滚动并且此内容 div 会填充以适合窗口的其余部分。问题是，由于标题的高度随窗口的宽度而变化，我无法以像素或百分比或任何具体的形式设置内容 div。
如何设置content div的高度随header的高度动态变化？
我不知道 Javascript 或 JQuery(我知道，我知道 - 我应该)，但理想情况下，内容 div 的高度将设置为类似高度:(视口(viewport)高度)-(标题高度) ，但我不知道该怎么做。
最佳答案
您不必为此使用脚本。 并且:我建议您将样式与标记分开。
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
将此添加到您的 CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
测试:IE10、IE9、IE8、FF、Chrome。
- 没有使用绝对定位
- 没有使用 Script(纯 CSS 解决方案)
- 流畅的布局
- 跨浏览器
解释: 使用伪元素，我正在创建一个 float 元素(没有内容或宽度，所以他是不可见的) 具有 100% 的容器高度。
我使用另一个伪元素在 content div 之后创建了一个 div。 (同样没有内容，所以他也是隐形的)具有 clear 属性。所以他必须在我之前创建的 float 的下面。使 content 一直向下。
关于html - 设置div动态填充其余高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18807145/