Home/ Questions/Q 1042751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T15:33:32+00:00

I’m creating a webpage with two stacked divs. The first div is a banner

  • 0

I’m creating a webpage with two stacked divs. The first div is a banner and the second div is the content. The problem I’m facing is I want the second div to stretch to the bottom of the page without creating a scrollbar. I could wrap the whole thing in another div and set overflow to hidden, but the second div will be filled with content and there’s a possibility that the content could stretch beyond the screen. Here is what I’ve written so far:

<html>
<head>
<title>test</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;    
}

html, body {
    background-color: blue;
    height: 100%;
}

#banner {
    background-color: red;
    width: 100%;
    height: 180px;
}

#content {
    background-color: #0F0F10;
    width: 100%;
    height: 100%;    
    color: #FFF;
}
</style>
</head>
<body>
    <div id="banner"></div>
    <div id="content"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do it pretty easily by wrapping your #banner inside your #content container:

    <div id="content">
    <div id="banner"></div>
    <p>Your content</p>    
</div>

    Then in your CSS, you have to explicitly set the padding and margins on the body and html to 0 (the wildcard doesn’t work cross-browser):

    *, html, body {
    margin: 0px;
    padding: 0px;    
}

html, body {
    background-color: blue;
    height: 100%;
}

#banner {
    background-color: red;
    height: 180px;
}

#content {
    background-color: #0F0F10;
    min-height: 100%;    
    color: #FFF;
}

    The 2 other changes that I made were to remove the width: 100% rules (since the div’s are block elements and will default to that) and change your height: 100% to min-height: 100% since this will allow your #content to grow with its content.

    If you need to support IE6, you’ll have to serve it height: 100% with conditional comments, on account of IE6 not understanding min-height, but treating height as min-height.

    You can see it in action here. Just delete the filler text and you’ll see the scrollbar disappears when it’s not needed anymore.

    • 0