tuc*_*pin 5 html css height svg
所以.我的代码就是这样的
<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的高度将设置为高度:(视口高度) - (标题高度),但我不知道如何做到这一点.
avr*_*ool 21
你不必使用脚本.并且:我建议您将样式与标记分开.
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.
说明: 使用伪元素,我正在创建一个浮动元素(没有内容或宽度,因此他是不可见的),它具有100%的容器高度.
和另一个伪元素我正在div之后创建一个contentdiv.(也没有内容,所以他也是隐形的)具有明确的属性.所以他必须低于我之前创造的漂浮物.让它content一路走下去.