如何種植側邊欄調整中心

<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％，但它仍然不是正確的答案。請幫我

來源

2010-12-02 aeruL

使用http://www.jsfiddle.net/ – ArK 2010-12-02 05:16:16

我想這是你在找:)

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

來源

2010-12-02 06:11:50

+1相當漂亮的解決方案，似乎這樣的伎倆沒有高度100％。 – Bazzz 2010-12-02 12:11:08

什麼是#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。

祝你好運！

來源

2010-12-02 05:35:05 Blender

如何種植側邊欄調整中心

回答

相關問題