--- title: "Making main section of a page fill the remaining height with CSS only" description: "Making main section of a page fill the remaining height with CSS only" author: "Anonymous User" published: 2013-06-15 updated: 2013-06-15 canonical: https://www.mindstick.com/forum/1151/making-main-section-of-a-page-fill-the-remaining-height-with-css-only category: "css-css3" tags: ["css-css3"] reading_time: 1 minute --- # Making main section of a page fill the remaining height with CSS only Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances),\ I have created two div as following\ **
** **

My Cool Site

****
**\ **
** **[Hello world](https://www.mindstick.com/forum/12912/how-to-show-hello-world-backbone-marionette-js)****
****\**The header div should take up as much [space](https://www.mindstick.com/articles/12954/do-your-electrical-repair-in-your-own-space) it needs. The main div should fill the remaining [page](https://www.mindstick.com/articles/13031/why-to-make-a-wikipedia-page) height exactly - a scroll bar should not appear. Is this possible to do with [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) only? No JavaScript.\ Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams) for any recommendations or solutions. ## Replies ### Reply by AVADHESH PATEL 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. --- Original Source: https://www.mindstick.com/forum/1151/making-main-section-of-a-page-fill-the-remaining-height-with-css-only Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.