Banner 100% width extends to window size, but not document size
We have a iamge banner on our web page that is a gradient that is repeated on the x-axis. The problem is, if our content on our web page (which is dyna开发者_C百科mically created based on data in our database) spans a width greater than the window width, then our banner no longer spans the entire width of the document when scrolled. Anyone know how to fix this?
A simple example is posted below. The blue is our "banner" the "red" is our content.
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:1500px;
background-color:red;
}
</style>
</head>
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</html>
Try putting the header inside the content div. Like this:
...
</head>
<div id="content">
<div id="header"></div>
<h1>TEST</h1>
</div>
</html>
Even better, add a wrapper:
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#wrapper {
width:1500px;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:100%;
background-color:red;
}
</style>
</head>
<div id="wrapper">
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</div>
</html>
Setting a min-width on your #header that equals the #content width would do it:
#header{
height:80px;
background-color:blue;
width:100%;
min-width: 1500px;
}
put a
<div id="wrapper"> header & content </div>
around everything... make wrapper position:relative, so 100% header is the width of the wrapper, which will be whatever content is.
加载中,请稍侯......
精彩评论