CSS如何使從頂部開始100px的DIV到達頁面底部

我已經閱讀了幾頁問題，但是我一直無法解決我的問題。我很確定這是一個非常簡單的問題，如果我浪費任何人的時間，我真的很抱歉，但我無法弄清楚這一點。我不會發布我的實際代碼，因爲我認爲一般答案會更快。我的頁面很簡單，沒有什麼特別的話，那就是建立這樣的：CSS如何使從頂部開始100px的DIV到達頁面底部

CSS example

整個頁面被包裝在一個容器中。我遇到的問題是，我無法使左列到達頁面的底部。我試過身高：100％;但它會創建一個滾動條，因爲頂部欄高度爲228像素。我試過給左欄一個高度：100％;和margin-bottom：-228px;但那也沒用。我之前在網站上看到過這種情況，而且我猜測我會因爲我應該知道這一點而感到憤怒，但是我可以將它歸咎於我感冒了嗎？無論如何，感謝您的幫助！

來源

2013-10-27 Protocol Zero

嘗試'底部：0;' – kol

在所有的誠實可能是發佈你的代碼的好主意。答案取決於你已經設置了父容器的position屬性。 –

我最初發布了我的代碼，但是這個頁面是一個更大的項目的一部分，並且CSS文件都是交織在一起的，而且這太過分了。這主要是我的錯，我沒有寫這個想法。 –

html, body { 
    display: block; 
    height: 100%; 
    width: 100%; 
} 

#left-column, #right-column { 
    height: 100%; 
}

的<html>和<body>元件（作爲一組選擇器）設置爲一個display: block然後通過100％伸展出來時，子元素可以繼承被稱爲100％height，否則，瀏覽器沒有按」不知道要引用什麼。

你也可以讓你的列絕對定位，然後例如添加top:100px; bottom:0（未經測試）

來源

2013-10-27 01:52:11

職位：絕對;頂：100px的;底部：0; - >永遠不會失敗！，照顧以前的位置：相對的容器; – aaronps

是的！這工作！現在我覺得自己像個白癡。具體來說，絕對定位，頂部設置爲任意，底部設置爲0.謝謝！ –

LIVE DEMO

CSS：

html,body{ 
    height: 100%; /* THAT IS IMPORTANT */ 
    width: 500px; 
    margin: 0 auto; 
} 
#header{ 
    border: 1px solid blue; 
    height: 100px; 
} 

#left{ 
    border: 1px solid green; 
    width: 100px; 
    float: left; 
    height: 100%; /* THAT IS IMPORTANT */ 
} 

#right{ 
    border: 1px solid red; 
    width: 100px; 
    float: right; 
    height: 100%; /* THAT IS IMPORTANT */ 
}

來源

2013-10-27 02:08:27 aldanux

這產生了和我一樣的問題，因爲頂欄有固定寬度，頁面滾動。我基本上想要左欄（右欄不一定）佔據頁面的整個高度，如果該框中的內容沒有延伸那麼遠，所以從左欄到下欄沒有間隙。不過謝謝。 –

CSS如何使從頂部開始100px的DIV到達頁面底部

回答

相關問題