MAKING MAIN SECTION OF A PAGE FILL THE REMAINING HEIGHT WITH CSS ONLY

john rob

Total Post:108

Points:756
Posted by  john rob
 1341  View(s)
Ratings:
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.
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Making main section of a page fill the remaining height with CSS only

    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. 

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!