forum

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

Ask Question

Making main section of a page fill the remaining height with CSS only

Anonymous User221415-Jun-2013
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.
css-css3css-css3 
Updated on 15-Jun-2013
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

AVADHESH PATEL

AVADHESH PATEL

15-Jun-2013
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. 
MindStick Training

Liked By