动态 DIV 容器高度
[英]Dynamic DIV Container Height
问题描述
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).我有 3 个 DIV，两个静态（灰色）和一个动态（红色）。 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)?有没有没有 javascript ，只有 CSS(3) 的解决方案？
Edit : Condition: the DIV on bottom should stay on bottom of the window, sorry.编辑：条件：底部的 DIV 应该留在窗口的底部，抱歉。
Additional Information附加信息
I already done it in JS (jQuery), but i think this is no good practice at all.我已经在 JS (jQuery) 中完成了它，但我认为这根本不是一个好习惯。 (The resize method for the middle DIV have to implement in every "layout changing event"). （中间 DIV 的调整大小方法必须在每个“布局更改事件”中实现）。
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 个解决方案
解决方案1
3 已采纳 2012-03-19 22:38:31
With absolute positioning, you can do: http://jsfiddle.net/rQVmK/使用绝对定位，你可以这样做： 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>
解决方案2
0 2020-07-29 16:54:11
You can use css grid for this:您可以为此使用 css 网格：
.parent {
grid-template-rows: auto 1fr auto;
}
reference: Pancake Stack参考：煎饼堆栈
解决方案3
0 2012-03-19 22:27:59
您可以使用绝对定位并指定顶部和底部位置。
解决方案4
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.不知道我是否遗漏了一些东西，但这就是 div 和所有块级元素如何自然地反应，你所要做的就是正确地包含它们而不是给它们一个固定的高度，因为它们默认具有height:auto . Try this setup for example:试试这个设置，例如：
HTML 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 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.