Home > DeveloperSection > Forums > Making main section of a page fill the remaining height with CSS only
john rob

Total Post:108

Posted on    June-15-2013 3:24 AM


 1 Reply(s)
 1317  View(s)
Rate this:
Hi Expert,

I have created two div as following

<div class="header">
    <h1>My Cool Site</h1>

<div class="main">
    Hello world

The header div should take up as much space it needs. The main div should fill the remaining page height exactly - a scroll bar should not appear. Is this possible to do with CSS only? No JavaScript.

Thanks in advance for any recommendations or solutions.


Total Post:604

Posted on    June-15-2013 3:47 AM

Hi John,

Try this solution. This positions your div at the bottom.

.main {
   background-color: #BAA378;
   border: 10px solid #453823;
   padding: 10px;
   height: 86%;
   bottom: 0;
   width: 100%;

I hope it helpful  for you. 

Don't want to miss updates? Please click the below button!

Follow MindStick