ASP.NET HTML佈局設計

我正在設計一個母版頁。佈局非常簡單，但高度調整對我無效。佈局是：ASP.NET HTML佈局設計

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

我想實現的是

「集裝箱」最小高度應爲100％，當含量比高度更應該擴大。
'頂部'div的高度應該是100px - 固定高度。
「底部」的高度應爲50px - 固定高度，並且
剩餘高度（空間）應分配到「中間」div。

總之，無論屏幕的高度是什麼，頁眉應該在頂部固定高度，頁腳應該在底部固定高度。當內容超過「中間」div的高度時，它應該只使用瀏覽器scrool條而不需要額外的滾動條。

我用下面的css，但它不起作用。

html, body {width:99%; height:98%; font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; font-size:12px;} 
#container {width:990px; height:100%; margin:0px auto 0px auto;} 
#top  {width:990px; height:100px;} 
#middle {width:990px; min-height:100%; border:1px solid #336699; overflow:auto} 
#bottom {width:990px; height:50px;}

注意：我打算在ASP.NET MVC頁面中使用它。

來源

2011-08-31 RAM

試試這個：

html,body { 
    margin:0; 
    padding:0; 
    height:100%; /* needed for container min-height */ 
} 

div#container { 
    position:relative; /* needed for footer positioning*/ 
    margin:0 auto; /* center, not in IE5 */ 

    height:auto !important; /* real browsers */ 
    height:100%; /* IE6 */ 

    min-height:100%; /* real browsers */ 
} 

div#top { 
    padding:1em; 
} 

div#middle { 
    padding:1em 1em 5em; /* bottom padding for footer */ 
} 

div#bottom { 
    position:absolute; 
    width:100%; 
    bottom:0; /* stick to bottom */ 
}

來源

2011-08-31 23:27:18

我最近有這個問題。

結帳這個link

來源

2011-08-31 23:26:50 scartag

ASP.NET HTML佈局設計

回答

相關問題