高度頁 - Div結構

我試圖讓我的頁面佔據屏幕的100％，並且頁腳需要始終位於頁面的底部。高度頁 - Div結構

當頁面調整大小時，div應該展開，並帶有正確的背景顏色。

我現在的錯誤是： - 頁腳停留在頁面底部而不是頁面。 - DIV（菜單）比格（內容）更大 - 股利不正確調整

這裏是我的代碼：

事業部stucture

<div id="container"><br /> 
    <div id="header">CMS</div> 

    <div id="menu"><?php include ('includes/menu.php');?></div> 
    <div id="content"> 
     <?php include $include_page?> 
    </div> 

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

CSS

body { 
    height: 100%; 
    color: #0b0b0b; 
    background-color: #696060; 
    margin: 0px; 
    padding: 0px; 
    font-family: Tahoma, sans-serif; 
    font-size: 12.5px; 
} 

#container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 1000px; 
    background-color: #f1f1f1; 
    border-left: 1px solid #8f8f8f; 
    border-right: 1px solid #8f8f8f; 
    height: 100%; 
} 
#header { 
    height: 100px; 
    width: 100%; 
    background-color: #a31f00; 
    color: #fcfcfc; 
    text-align: center; 
} 
#menu { 
    width: 210px; 
    background-color: #e0e0e0; 
    float: left; 
    padding: 10px 10px 10px 10px; 
    height: 100%; 
} 
#content { 
    width: 750px; 
    height: 100%; 
    float: left;  
    padding: 10px 10px 10px 10px; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    width: 1000px; 
    height: 20px; 
    background-color: #a31f00; 
    color: #fcfcfc; 
    text-align: center; 
    font-size: 11px; 
}

來源

2011-03-10 RR_1990

請格式化爲可讀格式。 – Dutchie432 2011-03-10 15:37:16

在編寫問題和答案時，StackOverflow顯示一個預覽窗格，您可以在其中查看您的文章的外觀。發佈前請確保格式正確。 – 2011-03-10 15:39:41

您可能會想到一個粘腳。當沒有足夠的內容壓下頁面時，粘滯的頁腳會粘到頁面的底部，但當內容開始溢出頁面時，頁面會隨之一起粘貼。

要一個，你基本上要包裝的一切是不是<div>標籤內頁腳，就像這樣：

<div id="wrap"> 
    <div id="header"> 
    ... 
    </div> 

    <div id="main"> 
    <!-- All you page content goes here --> 
    </div> 
</div> 

<div id="footer"> 
    I am a footer. 
</div>

現在，神奇的CSS：

html, body 
{ 
    height: 100%; 
} 

#wrap 
{ 
    min-height: 100%; 
} 

#main 
{ 
    overflow: auto; 
    padding-bottom: 150px; /* must be same height as the footer */ 
} 

#footer 
{ 
    position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear: both; 
} 

/* Opera Fix */ 
body:before 
{ 
    content: ""; 
    height: 100%; 
    float: left; 
    width: 0; 
    margin-top: -32767px;/ 
}

而上你的HTML頁面，你會需要這個條件樣式IE6及更早版本和IE8（!IE7意味着沒有7，但所有其他）：

<head> 
    ... 
    <!--[if !IE 7]> 
    <style type="text/css"> 
    #wrap 
    { 
     display: table; 
     height: 100%; 
    } 
    </style> 
    <![endif]--> 
    ... 
</head>

來源

2011-03-10 16:16:45 Blender

我試着把內容菜單div內的div。這種方式菜單始終是內容的高度，而內容div可以推動菜單 - 並在適用的情況下降低內容。去除高度100％。

爲什麼pos：abs在頁腳上？你有沒有嘗試親戚？

來源

2011-03-10 15:47:01 xalgorithm

無論上面的內容如何，您都可能想要閱讀此內容以便將頁腳對齊屏幕底部; http://www.zymic.com/tutorials/html/effective-footers/

來源

2011-03-10 16:04:49 Rasterize

高度頁 - Div結構

回答

相關問題