Abdul Jabbar WebBestow Abdul Jabbar WebBestow - 5 months ago 29
HTML Question

Fill remaining vertical space - only CSS

I need to fill the remaining vertical space of

#wrapper
under
#first
with
#second
div.

I need an only CSS solution.

HTML :

<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>


CSS :

#wrapper
{
width:300px;
height:100%;
}

#first
{
width:300px;
height:200px;
background-color:#F5DEB3;
}

#second
{
width:300px;
height:100%; //<-----This should fill the remaining space
background-color:#9ACD32;
}

Answer

You can do this with position:absolute; on the #second div like this :

FIDDLE

CSS :

#wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

EDIT : Alternative solution

Depending on your layout and the content you have in those divs, you could make it much more simple and with less makup like this :

FIDDLE

HTML :

<div id="wrapper">
    <div id="first"></div>
</div>

CSS :

#wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}
Comments