DIV background does not span 100% for entire body
I'm posting this because I am going crazy.
I have a page where the content is centered in the page and must span from top to bottom no matter the content, with two columns.
So I have a content div with a left child div and a right child div. The code is the following:
<html>
<head>
<style type="text/css">
html, body {
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
.main {
min-height: 100%;
margin: auto;
width: 400px;
background-color: red;
}
.left {
width: 100px;
padding: 0px;
heig开发者_StackOverflow社区ht: 100%;
float: left;
background-color: blue;
}
.right {
width: 300px;
height: 100%;
padding: 0px;
float: right;
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</body>
</html>
This works fine and the div spans to the bottom. I see two columns green and blue. The problem is that this does not work if the content in the divs (left or right) is larger then the browser window. Add a lot of content to the left or right div and you should see what I'm talking about, something like:
<div class="main">
<div class="left">
Left<br>
Left<br>
Left<br>
Left<br>
.... <!-- lots of these -->
</div>
<div class="right">
Right<br>
Right<br>
Right<br>
.... <!-- lots of these -->
</div>
</div>
My question is, why is this happening (I have set html, body { height: 100%; }) and how can I fix it?
I am going crazy. Please help me!
Thank you!
Are you clearing floats?
.main:after { content:""; clear:both;display:block; }
EDIT: In your SO code you use min-height whereas in the example you use regular height for .main. See, typos and human errors do happen a lot, which is why I wanted the real code.
I edited it for you: http://jsfiddle.net/Gd34j/1/
You could also try loading the colors as a background image on the page. Create a 1200px by 10px image with your background, then in your main container set background:url("bluegreen.jpg"), then set background-repeat to repeat-y.
Thanks to meder who pointed me on the right track, I finally managed to make it run consistently in IE, Mozilla and Chrome. Here is the complete code, hope it helps someone else too:
<html>
<head>
<style type="text/css">
html,body {
margin: 0px 0px 0px 0px;
height: 100%;
text-align: center;
}
.main:after {
content: "";
display: block;
clear: both;
}
.main {
background-color: red;
width: 400px;
min-height: 100%;
margin: auto;
text-align: left;
}
.left {
width: 100px;
padding: 0px;
float: left;
min-height: 100%;
background-color: blue;
}
.right {
width: 300px;
min-height: 100%;
padding: 0px;
float: right;
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="left">Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
</div>
<div class="right">Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
</div>
</div>
</body>
</html>
If you have floating elements in a non floating element, they will not expand the parent element. Just a floating to the main element:
.main {
min-height: 100%;
margin: auto;
width: 400px;
background-color: red;
float: left; /* adding floating so the parent elements expands */
}
加载中,请稍侯......
精彩评论