-1

我正在尝试设计我将用作网站模板的布局，经过大量阅读后，我想出了这个：

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 绝对定位，并且我一直在使用不同的浏览器来测试它。

有任何想法吗？

4

3 回答 3

0

首先，将link标签放在headHTML 文档的部分而不是正文部分。

至于css，我不会在元素上设置高度。相反，仅在绝对必要时设置高度。让内容、内边距和边距将页脚向下推到适当的高度。

于 2013-05-17T17:43:19.933 回答
0

我真的很想建议您考虑使用诸如引导网格之类的东西。它将使您在所有浏览器中的布局生活变得更加轻松..

您只需创建一个带有行的容器，并在其中添加具有某些跨度的 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-17T17:27:49.450 回答
0

这是因为你设置了 height:100%; 在您的#main 集中设置为 100px 或其他内容，它会起作用

于 2013-05-17T17:25:19.500 回答