CSS - Set size of Div to fill remaining space

Question

I'm new to CSS and im tryig to create the barebones structure of my template.

I have a div for header, main-content & footer. My footer & header fine, but i need to the main content div to "fill" the remaining space between the header & the footer. I've tried setting the padding-bottom property as the same height as the footer, but its not closing the gap to the footer, its simply setting the height of the div to the padding-bottom value.

My HTML

<!DOCTYPE html>
<HTML>
    <HEAD>

        <LINK type="text/css" rel="stylesheet" href="main.css"/> 
        <TITLE>Template</TITLE>

    </HEAD>
    <BODY>
        <div id="container">

            <div class="header"></div>

            <div class="main-content"></div>

            <div class="footer"></div>

        </div>
    </BODY>
</HTML>

And the Cascading style sheet.

#container{

    min-height:100%;
    position:relative;

}

.header{

    border:2px dashed blue;
    height:150px;
    border-radius:5px;
    padding:10px;
}


.main-content{


    border:2px dashed blue;
    border-radius:5px;
    padding:10px;
    padding-bottom:100px;



}

.footer{
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    border:2px dashed blue;
    border-radius:5px;




}

html, body{
   margin:0;
   padding:1px;
   height:100%;
}

Mr. Alien Mr. Alien · Accepted Answer · 2014-04-27T09:17:55

You can use calc() for your .main-content

.main-content {
    border:2px dashed blue;
    border-radius:5px;
    padding:10px;
    height: calc(100% - 300px);    
}

Demo

Also, I've tweaked few things here and there, for example, you won't need padding-bottom anymore, also, instead of using min-height: 100%; you should be using height: 100%;, and don't use uppercase-lowercase tags, keep an habit of writing the tags in lower case only.

CSS - Set size of Div to fill remaining space

1 Answers