Question

<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">
        <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>

当我在body_left中使用高度100％时，它仍然不是正确的答案。请帮帮我

Answer 1

我认为这就是你在寻找的东西：）

http://jsfiddle.net/JeaffreyGilbert/RtZFJ/

Answer 2

#body_left什么是扩展到？它的父级没有设置高度，因此当父级没有高度时，您无法定义100%的高度。

您必须将此CSS添加到顶部，以便为HTML提供适当的高度引用：

html, body, #wrapper
{
    height: 100%;
}

您的完整代码如下所示：

<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>

这是一个小提琴：http://www.jsfiddle.net/rASmX

另外，添加DOCTYPE。它可以帮助浏览器更好地理解您的CSS。

祝你好运！

如何种植侧栏调整中心

2 个答案: