所以。我的代码类似于
<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。
如何设置内容 div 的高度随标题高度动态变化？
我不知道 Javascript 或 JQuery （我知道，我知道 - 我应该），但理想情况下，内容 div 的高度将设置为类似 height:(视口高度)-(标题高度)，但我不知道如何做到这一点。
您不必为此使用脚本。
另外：我建议您将样式与标记分开。
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;
}
工作小提琴 http://jsfiddle.net/avrahamcool/HwYYw/3/
测试于：IE10、IE9、IE8、FF、Chrome。
- 没有使用绝对定位
- 没有使用Script（纯CSS解决方案）
- 流体布局
- 跨浏览器
解释：使用伪元素，我正在创建一个浮动元素（没有内容或宽度，所以他是不可见的）
具有 100% 的容器高度。
并使用另一个伪元素，我在之后创建一个 divcontent分区（也没有内容，所以他也是隐形的）具有clear属性。所以他必须低于我之前创建的浮动的。使content一直往下走。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
