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

Total Post:108

Points:756
Posted on    June-15-2013 3:24 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


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

I have created two div as following

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

<div class="main">
    Hello world
</div>

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.


AVADHESH PATEL

Total Post:604

Points:4228
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%;
   position:fixed;
   bottom: 0;
   width: 100%;
}

I hope it helpful  for you. 

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

Follow MindStick