在粘性頁腳上，如何使div邊界延伸到頁尾到頁尾？

我嘗試了所有粘性頁腳CCS示例。他們都工作得很好。但是，我有一個問題。假設我有這樣的：在粘性頁腳上，如何使div邊界延伸到頁尾到頁尾？

<div id="wrap"> 
    <div id="bodyleft">left</div> 
    <div id="bodyright">right</div> 
    <div id="footer">footer</div> 
</div>

所以，如果我有height 100%爲#bodyleft，邊框不會擴展到視年底到頁腳。它只會涵蓋一行內容。

無論是一行還是十行，我都希望邊界延伸到頁面的末尾。

任何想法？

謝謝！

瑪麗亞

編輯：

<body> 
<div id="wrap"> 

<div id="bodyleft">on left</div> 
<div id="bodyright"> 
    some text on right<br /> 
</div> 

</div> 


    <div id="footer">footer </div> 

</body> 
</html> 



* { margin:0px; padding:0px; } 

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#footer { 
     position: fixed; 
     bottom: 0; 
     background-color: #f00; 
     height: 20px; 
     width: 100%; 
     margin-top:-20px; /* negative value of footer height */ 
} 


#bodyleft{ 
    width:222px; 
    float:left; 
    border:1px solid black; 
    overflow:auto; 
    padding-bottom:20px; 
} 

#bodyright{ 
    width:777px; 
    float:right; 
    border:1px solid black; 
    overflow:auto; 
    padding-bottom:20px; 
}

來源

2010-08-19 MariaKeys

我可能是錯的，但我覺得100％會只去高到足以顯示div的內容。我想你可能不得不使用最小高度。

來源

2010-08-19 23:17:54

亞倫，謝謝你。我已經使用所有可用的變化，高度，最小高度，高度自動，高度100％..沒有任何東西可以擴展div的邊框 – MariaKeys 2010-08-19 23:23:57

你試圖達到什麼樣的效果（讓左div的底部邊框碰到頁腳將會非常棘手，因爲你不知道用戶的屏幕大小，你可以用表格做，但這會毀掉整個標記代碼。

你就不能模仿的底部邊框？

+----------------------------+------------------------+ 
| LEFT DIV     |  SAME FOR RIGHT |     
|       |      | 
+----------------------------+      | 
| DIV with 1px height  |      | 
| and same width as left div |      | 
| to simulate boder   |      | 
+----------------------------+------------------------+ 
| FOOTER            | 
+-----------------------------------------------------+

來源

2010-08-19 23:25:13 Frankie

哇，你們這麼快，請給我5分鐘謝謝弗蘭基 – MariaKeys 2010-08-19 23:34:09

* {margin：0px ; \t padding：0px; } HTML，身體{高度：100％;} #wrap {最小高度：100％;} #footer的{ \t \t位置是：固定; bottom：0; background-color：＃f00; height：20px; 寬度：100％; \t \t margin-top：-20px;/*頁腳高度負值*/ } #bodyleft { \t width：222px; \t float：left; \t邊框：1px純黑色; \t溢出：auto; \t padding-bottom：20px; } #bodyright { \t width：777px; \t float：right; \t邊框：1px純黑色; \t溢出：auto; \t padding-bottom：20px; } – MariaKeys 2010-08-19 23:40:07

我已添加到原始帖子。無法將代碼添加到我認爲的評論中。我第一次來這裏。 – MariaKeys 2010-08-19 23:45:01

在粘性頁腳上，如何使div邊界延伸到頁尾到頁尾？

回答

相關問題