Extend the height of a div to the bottom of the page

HTML & CSS
1

Hi,

how can I extend (or stretch) the height of a div (#bottom_box in my code) to the bottom of the page?

this is the desired result:

I have done this code, but I have some problems with the footer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title></title>
   <style type='text/css'>
      html, body {
         margin: 0;
         padding: 0;
         height: 100%;
         background: #00c2c2;
      }
      
      #main_content {
         width: 100%;
      }
      
      #content {
         width: 800px;
         background: #1e557b;
         margin-left: auto;
         margin-right: auto;
         padding-bottom: 65px;
      }
      
      #box_1 {
         width: 750px;
         height: 50px;
         background: #00cb30;
         margin-left: auto;
         margin-right: auto;
      }
      
      #box_2 {
         width: 750px;
         background: #ff0000;
         margin-left: auto;
         margin-right: auto;
      }
      
      #box_2 p {
         margin: 0;
         padding: 0;
      }
      
      #bottom_box {
         background: #a634b0;
         width: 100%;
      }
   
   </style>
   </head>
   <body>
      <div id='main_content'>
         <div id='content'>
            <div id='box_1'>
            </div>
            <div id='box_2'>
               <p>Lorem ipsum dolor sit amet consectetuer nulla nulla sapien faucibus risus. Fringilla ultrices sit elit feugiat ut fringilla wisi quis In Fusce. Lorem Phasellus tincidunt pretium laoreet egestas orci metus ante congue tempor. Turpis nibh Phasellus Lorem cursus tincidunt tristique facilisis et est netus. Commodo interdum Curabitur rhoncus orci Curabitur massa Mauris nunc sed Cum. Urna mauris et nibh.</p>
               <p>Phasellus pellentesque nunc lacinia nibh sem Morbi condimentum non vel tortor. Tortor sem volutpat eleifend est laoreet enim neque felis pretium et. Eu egestas et penatibus tincidunt Vestibulum orci vitae felis id mi. Amet eu tempus Vivamus et eget dolor nec Curabitur Ut faucibus. Convallis pellentesque tempus Curabitur nec ut Curabitur Vestibulum.</p>
               <p>Sed auctor ante Donec sapien Morbi dui quis vel adipiscing aliquam. Vestibulum Phasellus velit Donec morbi Cum laoreet In eu id libero. Nunc Ut laoreet consequat pretium condimentum nulla ornare suscipit iaculis elit. Auctor consectetuer sed Nulla Aenean pellentesque Maecenas metus habitasse ac egestas. Ullamcorper Curabitur augue commodo tincidunt id tempus ut et Nulla Praesent. Id condimentum Nam ipsum et dignissim Aenean interdum.</p>
            </div>
         </div>
      </div>
      <div id='bottom_box'>
      </div>
   </body>
</html>

how can I resolve that? Can you help me please?
many thanks to everybody!

2

It looks like you want what’s called a “sticky footer”. That’s tricky to do with CSS, but not impossible. Here’s a very good tutorial on how to do it:

If it’s just height: 100% you want, here’s a tutorial for that:

3

I don’t want sticky footer. Only height 100%.
I will read the link you have suggested to me. thanks.

4

Great. Let us know how you go! :slight_smile: