CSS DIV高度延伸到頁首

我的代碼如下：CSS DIV高度延伸到頁首

<html> 
    <head> 
     <style type="text/css"> 
      #container { 
      } 
      #content { 
      } 
      a { 
       color:#0083cc; 
      } 
      body { 
       margin:0px; padding:0px; 
      } 
      #header { 
       height:20px; 
       background-color:#fb0000; 
      } 
      #section1 { 
       margin: 0 auto; 
       width: 50%; 
       border-style: none none solid solid; 
       border-width: 5px; 
       border-color: red; 
       margin-top: 100px; 
      } 
     </style> 

     <title></title> 
    </head> 

    <body> 
     <div id="container"> 
      <div id="header"></div> 

      <div id="content"> 
       <div style="float: left;"> 
        Test 
       </div> 
       <div id="section1"> 
        <div style="text-align:center;"> 
         <h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1> 
        </div> 

       </div> 
      </div> 
     </div> 
    </body> 
</html>

我想知道是否有可能有一個＃SECTION1有一路延續到的#header的底部邊框？另外，是否可以讓包含「test」的div浮動，以便它立即出現在＃content1的邊界左側？

我很好，完全重構頁面，所以消失了。

在此先感謝！

編輯：其實，我期待完成的很像Facebook的當前佈局..更簡單。因此，可以將其用作參考以查看最終目標

來源

2011-12-04 Luke Cycon

爲什麼不在您的＃section1樣式中設置padding-top: 100px;而不是margin-top: 100px;？如果您希望測試內容也顯示得較低，您可以使用另一個規則來實現此目的，例如， #content div:first-child { margin-top: 100px; }。

來源

2011-12-04 11:28:58 Cito

Doh。 Box模型再次出現。感謝那！ –

CSS DIV高度延伸到頁首

回答

相關問題