全高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

回答

相关问题