不能修复CSS布局溢出

-1

我想要的风格布局，我会为我的网站和大量的阅读后的模板用我想出了这一点：不能修复CSS布局溢出

HTML：

<body> 
    <link rel="stylesheet" type="text/css" href="style/login.css" /> 
    <div id="wrapper"> 
     <div id="header"> 
      Header 
     </div> 
     <div id="main"> 
      Main 
     </div> 
     <div id="footer"> 
      Footer 
     </div> 
    </div> 
</body>

CSS：

html{ 
    height: 100%; 
} 

body{ 
    height: 100%; 
} 

#wrapper{ 
    height: 100%; 
} 

#header{ 
    height: 100px; 
    width: 100%; 
} 

#main{ 
    height: 100%; 
    width: 100%; 
} 

#footer{ 
    width: 100%; 
    height: 50px; 
    text-align: center; 
    position: relative; 
}

似乎是工作，但由于某种原因，包装和主DIV似乎采取完全一样的高度，这使得页面长得比窗口大，向下滚动需要看到页脚。

我尝试了很多东西来解决这个包括CSS绝对定位，我一直在使用不同的浏览器来测试它。

什么想法？

来源

2013-05-17 NeoZeroX21

这是因为你设定的高度：100％;在#main集是为100px或别的东西，它会工作

来源

2013-05-17 17:25:19

是的，但我这样做是因为我需要页眉和页脚始终分别位于顶部和底部，即使内容不如窗口那么大。 – NeoZeroX21

你需要的是一个粘性页脚（http://ryanfait.com/sticky-footer/） –

我使用它并创建它。谢谢 – NeoZeroX21

我真的想建议你看一下使用类似引导电网.. 它会使你的布局生活变得更轻松在所有浏览器..

您只需创建一个带有行的容器，并在其中添加具有特定跨度的div，并将所有内容完美对齐。

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 

<div class="container"> 
    <div class="row" id="header"> 
    </div> 
    <div class="row" id="body"> 
    </div> 
    <div class="row" id="footer"> 
    </div> 
</div>

做:)

进一步阅读，喜欢花费10-15分钟弄清楚，然后说再见CSS噩梦..

http://www.revillwebdesign.com/twitter-bootstrap-tutorial/

http://twitter.github.io/bootstrap/scaffolding.html

来源

2013-05-17 17:27:49

第一，请将link标记放在HTML文档的head部分中，而不要放在正文部分。

至于CSS，我不会设置元素的高度。相反，只有在绝对必要时才设置高度。让内容，填充和边距将页脚向下推到适当的高度。

来源

2013-05-17 17:43:19