如何用CSS構建這個佈局？

我不是新來的CSS，但這對我來說是個問題，我無法解決它。我需要如下構建佈局：如何用CSS構建這個佈局？

Layout http://img121.imageshack.us/img121/2153/layoutsample.jpg

Div的是在底部和頂部有固定的高度。中間的一個必須在頁高的高度 - 或者在某些情況下要小一些。

此外，它必須有這樣的大小設置，因爲我預測有時它的內容會比它大，然後它將需要一個滾動條內。

我會接受的情況下，DIV2會更小，但不會太大，以適應與DIV1和DIV3頁面大小。

的任何解決方案，將是不錯的，不僅是使用CSS，但如果你有一個想法，你可以扔掉一些JavaScript太...我將是任何解決方案感激。即使不完全正確:)

來源

2010-07-27 ŁukaszW.pl

我相信你想要的東西，這樣的

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div>

來源

2010-07-27 14:49:19

偉大的解決方案，謝謝約翰哈特洛克先生... – 2010-07-27 14:55:38

沒問題。我總是使用這種佈局。它的靈活性和易用性。沒有JavaScript，只是純粹的HTML和CSS。你也可以使用相同的技術將內容分割成兩個創建左側導航菜單 – 2010-07-27 14:58:28

使用jQuery設置DIV2的高度上的窗口大小調整：

var $div1 = $('#DIV1'), 
    $div2 = $('#DIV2'), 
    $div3 = $('#DIV3'), 
    $window = $(window); 

$window.resize(function() 
{ 
    $div2.height($window.height() - ($div1.height() + $div3.height())); 
});

是我用過的另一種選擇。

來源

2010-07-27 14:53:11

Aaaa ..一些js解決方案，很好..感謝您的幫助... – 2010-07-27 14:58:15

這將幫助您居中的div垂直和水平

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

來源

2010-07-27 14:53:11 Catfish

非常好的鏈接，謝謝..將是有益的... – 2010-07-27 14:57:20

我不知道如果我明白究竟你問什麼。但是這個怎麼樣。

<html> 
<head> 
<style> 
body { 
    margin : 0 
} 

#top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100px; 
    border: solid 1px black 
} 
#middle 
{ 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
    left: 0; 
    width: 100%; 
    overflow: auto; 
    border: solid 1px green; 
} 

#bottom { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 100px; 
    width: 100%; 
    border: solid 1px blue; 
} 

</style> 

</head> 
<body> 
    <div id="top"></div> 
    <div id="middle"></div> 
    <div id="bottom"></div> 
</body> 
</html>

來源

2010-07-27 15:02:39 Jonnio

如何用CSS構建這個佈局？

回答

相關問題