CSS Parent DIV Overflow
I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows:
<body>
<div id="Container">
<div id="Logo"></div>
开发者_JAVA技巧 <div id="Banner">
<div id="Nav"></div>
</div>
<div id="Content">
</div>
<div id="footer">Footer</div>
</div>
</body>
And my CSS is as follows:
@charset "utf-8";
/* CSS Document */
html, body {
height:100%;
padding:0;
margin:0;
background-image:url(../layout.img/background_gradient.gif);
background-repeat:repeat-x;
}
#Container {
height:100%;
width:950px;
margin:auto;
background-color:#FFFFFF;
border-left:1px solid #333333;
border-right:1px solid #333333;
}
#Logo {
width:160px;
height:160px;
float:right;
}
#Banner {
width:100%;
height:160px;
}
#Nav {
width:550px;
height:33px;
position:relative;
top:100px;
left:50px;
}
#Content {
clear:both;
}
And finally the result can be seen here:
http://jsfiddle.net/mczMS/
As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.
Try adding:
#container { min-height: 100%; }
after height 100%. You may also want to try:
#container { overflow: auto; }
If you remove the height:100% from the container it will stretch to fit its contents.
加载中,请稍侯......
精彩评论