Dynamic DIV Container Height
Question
i know every web-developer hates this topic, but anyway... i found no good solution for this.
i have 3 DIVs, two static (grey ones) and one dynamic (red one). The image describes the whole window. Such as at a chat application.
And, yep, the question is: how do i get the red one dynamic when the window get resized (or on other layout changes). Is there a soltuon without javascript , just CSS(3)?
Edit : Condition: the DIV on bottom should stay on bottom of the window, sorry.
Additional Information
I already done it in JS (jQuery), but i think this is no good practice at all. (The resize method for the middle DIV have to implement in every "layout changing event").
Example here:
var div1 = $('#div1').outerHeight(true);
var div2 = $('#div2').outerHeight(true);
var div3Padding = $('#div3').outerHeight(true) - $('#div3').innerHeight();
$('#div3').css({ height: window.innerHeight - (div1 + div2) - div3Padding });
4 answers
solution1
3 ACCPTED 2012-03-19 22:38:31
With absolute positioning, you can do: http://jsfiddle.net/rQVmK/
<html>
<style type="text/css">
#div1, div2, div3 { position: absolute; }
#div1 {
border: 3px solid #eee;
height: 30px;
top: 0; left: 0; right: 0;
}
#div2 {
border: 3px solid #e00;
top: 30px; bottom: 30px;
left: 0; right: 0;
}
#div3 {
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0; left: 0; right: 0;
}
</style>
<div id="div1">Top</div>
<div id="div2">Middle</div>
<div id="div3">Bottom</div>
</html>
solution2
0 2020-07-29 16:54:11
You can use css grid for this:
.parent {
grid-template-rows: auto 1fr auto;
}
reference: Pancake Stack
solution3
0 2012-03-19 22:27:59
您可以使用绝对定位并指定顶部和底部位置。
solution4
0 2012-03-19 22:51:22
Don't know if i'm missing something but that is how divs, and all block-level elements, react naturally, all you have to do is properly contain them and not hand them a fixed height since they have height:auto by default. Try this setup for example:
HTML
<div class="container">
<div class="header">
This is a header
</div>
<div class="content">
This is a content div
</div>
<div class="footer">
This is a footer
</div>
</div>
CSS
.container {
width:378px;
margin:0 auto;
padding:10px;
background-color:#fff;
border:1px solid #515151;
}
.header, .footer {
height:60px;
}
.header {
background-color:#00B4FF;
}
.footer {
background-color:#515151;
}
.content {
border:1px solid #000;
margin:10px 0;
padding:10px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.