根據頂部（）和底部（）設置CSS的DIV高度

我正在處理的頁面爲www.joelchristophel.com。您可以通過檢查大多數瀏覽器中的元素來查看源代碼。我想要內容div，稱爲main_body，來填充標題和main_bottom div之間的區域。爲此，我已經設置了頂部像素的位置以及底部像素的位置。但是，這不起作用，因爲main_body只擴展到內容的大小。我應該怎麼做呢？根據頂部（）和底部（）設置CSS的DIV高度

編輯：最後，main_body應該固定在溢出設置滾動的地方。

來源

2013-05-17 Joel Christophel

你是否真的想將頁腳修復到底？請記住，也許內容需要一個醜陋的滾動條。我會嘗試給main_body分鐘/最大高度 – abimelex

這就是爲什麼溢出設置爲滾動。另外，儘管在CSS文件中使用了一個腳本，但我還沒有使用腳註。 –

所以在你的情況下，更好的方法是將頁面高度設置爲100％，並將其他高度設置爲與頁面相對，而不是使用固定位置。 – abimelex

我結束了使用百分比作爲高度。並從main_bottom中刪除bottom: 20;行。這就像一個魅力。

來源

2013-05-19 02:31:44

你的'底部：20;'是無效的。你沒有文檔類型，所以你有怪癖。你知道你想要什麼，但你會從這裏開始不斷的戰鬥。 – Rob

你能否闡述一下，因爲我是全新的。（例如，如何添加文檔類型，爲什麼我需要一個，等等） –

CSS需要「單位」，如px或em。你有什麼就像告訴某人，「我住在這裏20遠」。「文檔類型」（文檔類型）爲您的文檔設置標準模式。沒有一個，它就像1999年一樣。標準模式通過將它放在第一行：'<！DOCTYPE html>'來設置。更多在這裏：http://hsivonen.iki.fi/doctype/ – Rob

我建議你手動設置每個div的高度，然後玩弄它。在你的css中#main .main_body設置：

height = 500px;

500是你想要的任何值。然後把你的main_bottom div放到你的主體div中。

你也應該看看這個鏈接：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks如果你想讓一個孩子div高度與父div一樣可以幫助你一點。

來源

2013-05-17 06:30:26 falky

這是您的要求代碼。

HTML

<div class="header"> 

</div> 

<div class="content"> 
    Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!! 
</div> 

<div class="footer"> 

</div>

CSS

.header 
{ 
    width:100%; 
    float:left; 
    border:1px solid black; 
    height:50px; 
} 

.content 
{ 
    width:100%; 
    float:left; 
    border:1px solid black; 
    margin-top:10px; 
    height:auto: 
} 

.footer 
{ 
    width:100%; 
    float:left; 
    border:1px solid black; 
    height:50px; 
    margin-top:10px; 
}

試試看.. !!

來源

2013-05-17 06:38:09

根據頂部（）和底部（）設置CSS的DIV高度

回答

相關問題