Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

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 User 2588 15 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-css3 css-css3
Updated 15 Jun 2013
Anonymous User
Anonymous User

Other

I am a content writter !

Message

1 Answers

AVADHESH PATEL
AVADHESH PATEL 15 Jun 2013
Report Abuse
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