获取DIV以影响其之前的元素高度？

enter image description here

基本上它是包含在一个container_div有其宽度和高度指定只有三个div的。对容器和顶部DIV + CSS代码如下所示：

.container_div{ 
    width: 800px; 
    height: 500px; 
} 

.top_div{ 
    width:100%; 
    height:100px; 
}

什么我现在试图做的是拿出CSS代码为center_div和bottom_div元素的方式：

底div没有溢出
底部div可以增长/缩小而不会导致其父元素改变其大小（类似于bottom：0绝对定位）
每当底部div增长时，center div缩小，反之亦然。

这是当底部的div增长会发生什么：

enter image description here

我要寻找一个纯CSS的解决方案。 Firefox支持就够了。

来源

2014-11-06 wtf8_decode

后所有的HTML和CSS你走到这一步。即使是一个JSFiddle。 – Refilon 2014-11-06 12:32:53

有什么条件？父母的div可以增长吗？底部div是否允许滚动？ – 2014-11-06 12:35:08

其实没有。父维度是固定的。 – 2014-11-06 17:10:29

这可以通过CSS表格布局轻松实现。在你的情况下，涉及表格行，这将（默认情况下）自动填充它的容器空间display: table。

在你的情况，只需设置：

顶格是一个固定高度
中间格为100％的高度。这将把底部的div压缩到它自己的内容高度。
底部div为零高度。

body { margin: 0; } 
 

 
#container { 
 
    display: table; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    color: white; 
 
} 
 

 
#container > div:nth-child(1) { 
 
    display: table-row; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
#container > div:nth-child(2) { 
 
    display: table-row; 
 
    height: 100%; 
 
    background: green; 
 
} 
 

 
#container > div:nth-child(3) { 
 
    display: table-row; 
 
    height: 0; 
 
    background: blue; 
 
}

<div id="container"> 
 
    <div>div 1 (fixed 100px)</div> 
 
    <div>div 2 (expand to fill remaining space) </div> 
 
    <div> 
 
     div 3 (fit its own content) 
 
     loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet... 
 
    </div> 
 
</div>

来源

2014-11-06 12:40:19 LcSalazar

获取DIV以影响其之前的元素高度？

回答

相关问题