Question

我想建立一个全高度的网站，但看起来Twitter的身体最小高度100％

这里是我的css：

html{
    height:100%;
}
body{
    min-height:100%
}
#main{
    min-height:100%;
}

这里是我的HTML：

<html>
    <head>
        ...
    </head>
    <body>
        <div id="main" class="container">
            ...
        </div>
    </body>
</html>

如果内容小于浏览器，我希望我的#main div始终与浏览器的高度相同，但如果我的内容更大，我希望我的div比浏览器更高。

使用我的代码，＃main div始终占据我的内容的高度，如果我的内容很少，则不会调整到我的浏览器大小。

为什么？！

Answer 1

尝试提供此CSS。

body, html {
  height: 100%;
  min-height: 100%;
}
#main {
  min-height:100%;
}

Answer 2

您需要为代码添加一些额外的CSS。

#main {
min-height:100%;
}

body, html {
height: 100%;
min-height: 100%;
}

我希望这是你正在寻找的，如果，不要试着解释我发生了什么;）！

Answer 3

只需添加以下CSS即可完成：

body, html {
  padding:0px;
  margin:0px;
  height: 100%;
  min-height: 100%;
}