Getting a DIV to change the previous height of an element?
I currently have something like the following:
Basically there are just three divs contained in one container_div
that has the specified width and height. The CSS for the container and top div looks like this:
.container_div{
width: 800px;
height: 500px;
}
.top_div{
width:100%;
height:100px;
}
Now I am trying to make CSS code for elements center_div
and bottom_div
in such a way that:
- Bottom div has no overflow
- The bottom div can grow / shrink without causing its parent to resize it (something like bottom: 0 absolute positioning)
- Whenever the bottom div grows, the center of the div shrinks and vice versa.
This is what should happen when the bottom div grows:
I am looking for a pure CSS solution. Firefox support is sufficient.
source to share
This can be easily achieved with a css table layout. In your case, using the table rows that will (by default) automatically fill the container space display: table
.
In your case, just install:
- Top div must be fixed height
- The middle div should be 100% height. This will cause the bottom div to shrink to its own content height.
- The bottom div must be null.
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>
source to share