CSS: How to get rid of scroll (except when there's additional content)?
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>
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.
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>
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>
加载中,请稍侯......
精彩评论