築巢Div的建立頁腳（已嘗試明確：兩者）

我試圖讓下面的「容器」被識別爲包裝div和承擔其他元素的高度。這樣我就可以動態調整其他元素的大小，並將容器放置在底部。築巢Div的建立頁腳（已嘗試明確：兩者）

我的解決方案看遍（！了幾個小時了），並處處提及明確的：兩個或溢出：汽車，兩者都不似乎工作

真的會喜歡它，如果一些人們可以指出我要出錯的地方！

<HTML> 
<head> 

    <style type="text/css"> 
    body { 
       text-align: left; 
       font-size: small; 
     } 
    #Layer-2 { 
       position: absolute; 
       margin-left: -640px; 
       left: 50%; 
       top: +0px; 
       width: 1280px; 
       z-index: 2; 
      } 


    #Layer-3 { 
       position: absolute; 
       left: 146px; 
       top: 33px; 
       width: 687px; 
       height: 59px; 
       z-index: 3; 
      } 


    #Layer-4 { 
       position: absolute; 
       left: 157px; 
       top: 125px; 
       width: 174px; 
       height: 843px; 
       z-index: 4; 
      } 


    #Layer-5 { 
       position: absolute; 
       left: 361px; 
       top: 286px; 
       width: 776px; 
       height: 682px; 
       z-index: 5; 
       overflow: auto; 
      } 
    hr { 
      display: block; 
      clear: left; 
      margin: -0.66em 0; 
      visibility: hidden; 
    } 

#container {overflow:hidden;} 


    </Style> 
</head> 
<body> 
<div id="container"> 
    <div id="Layer-2"> 

      <div id="Layer-5" > 
      Hello World 
      </div> 

      <div id="Layer-4" > 
      Hello World 2 
      </div> 

      <div id="Layer-3" > 
      Hows Things today? 
      </div> 
     <hr> 
     <br style="clear: both; height: 0; visibility: hidden;"> 
    </div> 
    <br style="clear: both; height: 0; visibility: hidden;"> 
</div> 
    <div WIDTH="100%"> Footer </div> 

</body> 
</html>

來源

2012-02-28 user1236777

這裏是一些更正後的代碼的fiddle。請注意，我已經爲所有div元素添加了邊界，以查看嵌套的永久化方式。您的「問題」是所有div的CSS規則中的position:absolute。我也刪除了所有的z-index規則，因爲它們不再是壞死的。

看你的代碼，你有需要修復的一些問題：

當你申請position:absolute一個元素，它需要的元素出自然流暢的，這意味着它不會影響其餘的元素。這就是您的頁腳位於文檔頂部的原因。
br和hr是空的元素，應該這樣寫：<br />和<hr />等
我會建議保持所有的CSS樣式在<style>區域，而不是讓它與各地內嵌樣式的地方。例如：而不是<div WIDTH="100%">使用類似#footer {width:100%}的css，並將其放在文檔的頭部或外部文件中。
overflow:hidden and clear:both should always work。如果他們不，請檢查您的代碼是否有錯誤。

來源

2012-02-28 00:44:33

嗨，歡呼的回覆！我使用絕對定位來定位菜單，標題和內容，因此需要將Div完全定位。環顧論壇，我發現大多數人推薦使用clear：both函數或者一些變體來解決定位問題。但是，這似乎並沒有工作上面，任何想法？也完全同意整理成樣式表，但很忙，很抱歉 – user1236777 2012-02-28 10:55:42

使用'position：absolute'將元素從流中取出，因此'clear：both'或equivilant根本不會工作。如果你必須絕對定位你的元素，你可以實現你想要做的唯一方法是將頁腳放置在底部元素內。這裏是一個例子http://jsfiddle.net/ZdLuw/2/。請記住，正確的方法是通過'position：static'並浮動。 – 2012-02-28 16:19:21

啊，我看到了我的方式錯誤（教我哈希代碼！）謝謝！ – user1236777 2012-02-28 22:16:20

築巢Div的建立頁腳（已嘗試明確：兩者）

回答

相關問題