全高CSS柱

我有以下HTML建立一個900像素寬，居中頁，具有頁眉，頁腳和內容部分：全高CSS柱

<body> 
    <div id="mainMaster"> 
     <div id="main"> 
      <form runat="server"> 
      <div id="header"> 
      </div> 
      <div id="content"> 
      </div> 
      </form> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
</body>

佈局樣式爲以下（約）CSS：

html, body 
{ 
    height: 100%; 
} 

#mainMaster 
{ 
    min-height: 100%; 
    background: url(../Images/Background.png); 
} 

#main 
{ 
    width: 930px; 
    margin: 0 auto; 
    height:auto !important; /* real browsers */ 
height:100%; /* IE6: treaded as min-height*/ 
min-height:100%; /* real browsers */ 
} 

#header 
{ 
} 

#footer 
{ 
    background-image:none; 
    background-color:White; 
    position: relative; 
    margin-top: -80px; /* negative value of footer height */ 
    margin-left: auto; 
    margin-right: auto; 
    width: 930px; 
    height: 80px; 
    clear: both; 
} 

#content 
{ 
    position:relative; 
    overflow:hidden; 
    height:100%; 
background-image:none; 
background-color:White; 
}

該CSS最初是基於我在互聯網上發現的「粘性頁腳」佈局。它可以很好地處理粘滯的頁腳，但是後來我遇到了這些問題：

1）「內容」永遠不會伸展到完整大小。這是我的一些頁面上的一個大問題，因爲內部控件被設置爲100％的高度。由於內容不被拉伸，控件顯示出所有尖銳的聲音。

2）我剛添加了背景圖片和顏色。此背景不應顯示在中間內容窗格中。由於'內容'沒有完全伸展，我得到的背景圖片顯示在錯誤的地方。

我更喜歡一個CSS只爲此修復（即沒有黑客或JS）。任何幫助？

來源

2010-07-21 LoneRanger

我希望去除#mainMaster <div>和移動它的背景圖像分割成＃主的CSS將整理出您的問題：

<body>  
    <div id="main"> 
     <form runat="server"> 
      <div id="header"></div> 
      <div id="content"></div> 
     </form> 
    </div> 
    <div id="footer"></div> 
</body>

你正在運行到的問題是＃主的父（#mainMaster）沒有明確的高度聲明。元素父高度定義時，百分比高度才能正常工作。

來源

2010-07-21 15:17:20 Pat

我相信mainMaster需要保持粘性頁腳保持在屏幕的底部。 – LoneRanger 2010-07-21 15:42:11

全部刪除#mainMaster會導致#main接管此角色。如果您注意到，它也具有與#mainMaster相同的最小高度聲明。 – Pat 2010-07-21 15:54:48

嘗試使用min-height CSS屬性爲您的內容設置最小高度。

來源

2010-07-21 15:19:50 Sarfraz

向#content和#header添加特定的背景顏色應避免在這些區域顯示背景圖像。不知道爲什麼內容沒有填滿該區域，當你說「伸展」，你的意思是100％的高度？如果不使用js，瀏覽器將無法識別100％的高度。

來源

2010-08-01 17:53:19 tomvon

回答

相關問題