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">&nbsp;</div>
            <div id="body_left">&nbsp;</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">&nbsp;</div>
            <div class="clear"></div>
            <div id="footer">&nbsp;</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">&nbsp;</div>
            <div id="body_left">&nbsp;</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">&nbsp;</div>
            <div class="clear"></div>
            <div id="footer">&nbsp;</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!