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 Forums Making main section of a page fill the remaining height with CSS only – MindStick
Ask Question

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

Anonymous User 2652 15 Jun 2013
Hi Expert,

I have created two div as following

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

<div class="main">
</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
Anonymous User
Ask by Anonymous User
Updated 15 Jun 2013

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
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md