ansaurus

Question

CSS Question: How to get rid of scroll (except when there's additional content)?

Answer 1

A:

You can achieve the same without restructuring the HTML. If you don't want to wrap the banner in the content (e.g. for semantic reasons), you should use absolute positioning on the content. Instead of setting the height to 100% you set top:181px and bottom:0 in CSS.

<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%;
    position: absolute;
    top: 181px;
    bottom: 0px;
    color: #FFF;
}
</style>
</head>
<body>
    <div id="banner"></div>
    <div id="content"></div>
</body>
</html>

jfs 2010-08-30 01:06:51

Answer 2

A:

I recommend using a <table>. Set the height of the table to be 100%. Then set the height of the first cell to 180px.

You will need to ignore the distant howls of the Semantic Web when you do this, however.

Here is some sample code:

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

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

table {
    width:100%;
    height:100%;
    border-collapse:collapse;
}

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

td#content {
    background-color: #0F0F10;
    color: #FFF;
}
</style>
</head>
<body>
    <table>
        <tr><td id="banner"></td></tr>
        <tr><td id="content"></td></tr>
    </table>
</body>
</html>

Jeff Fohl 2010-08-30 01:11:00

Wow I never thought of using a table. That makes a lot of sense thanks!

Darren 2010-08-30 01:19:19

@Jeff <distant-howl>you really, really don't need a table for this</distant-howl>

Pat 2010-08-30 01:24:22

Although a few years ago I would've completely agreed to this solution, tables only make sense when tabular data is being served. I was going to post the same answer Pat posted. Additionally, if you explicitly need separate divs for content and the banner, you could use a third div as a wrapper for them. It's pretty much the same idea that is behind the "faux columns" method.

FreekOne 2010-08-30 01:29:06

Fair enough. I gave Pat an up vote because his method also works. When it comes to `<table>` vs `<div>`, my feeling is that as long as the developer knows the pros and cons, and when to use them, they should use what works for them. The important thing is to know why you are doing it one way or the other.

Jeff Fohl 2010-08-30 01:33:55

Answer 3

+3 A:

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.

Pat 2010-08-30 01:22:36

+1 I was about to post a similar answer but you beat me to it :)

FreekOne 2010-08-30 01:30:41

i guess i should have waited a bit longer before picking an answer. this seems more appropriate. thanks

Darren 2010-08-30 01:39:23

ansaurus

tags:

views:

answers:

CSS Question: How to get rid of scroll (except when there's additional content)?

related questions