设置div动态填充其余的高度？ [英] Set div to fill in the rest of the height dynamically?
问题描述
所以。我的代码是
< html>
< body>
< div id =headerstyle =width：100％; min-height：0; display：block; background-color：＃000>
< img src =header_image.svg/>
< / div>
< div id =contentstyledisplay：block>
某些内容
< / div>
< / body>
< / html>
我在我设置的标题中有一个svg，以便它与窗口的宽度匹配，高度缩放以保留svg。然后我有剩下的页面在另一个div。我想它，以便页面不滚动，这个内容div填充，以适应窗口的其余部分。问题是，由于标题的高度随窗口的宽度而变化，我不能以像素或百分比或任何具体的形式设置内容div。
如何我可以设置内容div的高度随标题的高度动态变化吗？
我不知道Javascript或JQuery（我知道，我知道 - 我应该），但理想情况下，内容div的高度将被设置为像height：（viewport的高度） - （标题的高度），但我不知道如何这样做。
你不必使用脚本。
以及：我建议您将样式与您的标记分开。
HTML
< div id =wrapper>
< div id =header>
< img src =header_image.svgalt =img is empty/>
< / div>
< div id =content>部分内容< / div>
< / div>
将其添加到您的 CSS
html，body {
height：100％;
margin：0px;
}
/ *这是一个大窍门* /
#wrapper：before {
content：'';
float：left;
height：100％;
}
#wrapper {
height：100％;
background-color：black;
颜色：白色
}
#header {
background-color：＃000;
}
#content {
background-color：gray;
}
/ *这是一个大技巧* /
#content：after {
content：'';
display：block;
clear：both;
}
测试： IE10，IE9，IE8，FF ，Chrome。
- 未使用绝对定位
p> 说明：
与伪元素，我创建一个浮动元素（没有内容或宽度，因此他是不可见的）
具有100％的容器高度。 / p>
和另一个伪元素我在 content div之后创建一个div。 （也没有内容，所以他也是看不见）有清楚的属性。所以他必须在我之前创建的浮动下面。使内容一路下降。
So. My code is something along the lines of
<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>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that. and also: I recommend you to separate your styling from your markup.
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>
add this to your 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;
}
Tested on: IE10, IE9, IE8, FF, Chrome.
- didn't use absolute positioning
- didn't use Script (Pure CSS solution)
- fluid layout
- cross-browser
Explanation: with pseudo element, I'm creating a floating element (without content or width, so he's invisible) that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
这篇关于设置div动态填充其余的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
