How to grow side bar adjust the center
<html>
<head>
<title>
Learning CSS
</title>
<style type="text/css">
#header
{
padding:1px;
margin:1px;
border:1px solid #808080;
text-align:center;
height:100px;
background-color:#804040;
}
.clear
{
float:none;
clear:both;
}
#wrapper
{
width:700px;
margin:0 auto;
border:1px solid #808080;
padding:2px;
clear:both;
overflow:hidden;
}
#body_left
{
display:block;
height:100%;
position:relative;
width:130px;
float:left;
border:1px solid #808080;
margin-right:2px;
}
#body_center
{
position:relative;
width:430px;
float:left;
border:1px solid #808080;
background-color:#ffa980;
}
#body_right
{
position:relative;
width:130px;
float:left;
border:1px solid #808080;
margin-left:2px;
}
#footer
{
padding:1px;
margin:1px;
border:1px solid #808080;
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
开发者_JAVA百科 <div id="header"> </div>
<div id="body_left"> </div>
<div id="body_center">Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br /></div>
<div id="body_right"> </div>
<div class="clear"></div>
<div id="footer"> </div>
</div>
</body>
when i use height 100% in body_left, it still not the right answer. Please help me
I think this is what are you looking for :)
http://jsfiddle.net/JeaffreyGilbert/RtZFJ/
What is #body_left going to scale up to? It's parent has no set height, so you can't define a height of 100% when the parent has no height.
You have to add this CSS to the top, to give the HTML proper height references:
html, body, #wrapper
{
height: 100%;
}
Your full code would look like this:
<html>
<head>
<title>
Learning CSS
</title>
<style type="text/css">
html, body, #wrapper
{
height: 100%;
}
#header
{
padding:1px;
margin:1px;
border:1px solid #808080;
text-align:center;
height:100px;
background-color:#804040;
}
.clear
{
float:none;
clear:both;
}
#wrapper
{
width:700px;
margin:0 auto;
border:1px solid #808080;
padding:2px;
clear:both;
overflow:hidden;
}
#body_left
{
display:block;
height:100%;
position:relative;
width:130px;
float:left;
border:1px solid #808080;
margin-right:2px;
}
#body_center
{
position:relative;
width:430px;
float:left;
border:1px solid #808080;
background-color:#ffa980;
}
#body_right
{
position:relative;
width:130px;
float:left;
border:1px solid #808080;
margin-left:2px;
}
#footer
{
padding:1px;
margin:1px;
border:1px solid #808080;
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> </div>
<div id="body_left"> </div>
<div id="body_center">Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />
Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br />Center<br /></div>
<div id="body_right"> </div>
<div class="clear"></div>
<div id="footer"> </div>
</div>
</body>
</html>
Here's a Fiddle: http://www.jsfiddle.net/rASmX
Also, add a DOCTYPE. It helps browsers understand your CSS better.
Good luck!
加载中,请稍侯......
精彩评论