CSS样式BODY标签问题答案

【问题标题】：CSS styling BODY tag issueCSS样式BODY标签问题
【发布时间】：2011-11-23 14:45:54
【问题描述】：

我很久没有做过任何 CSS / HTML 开发了，我在使用 CSS 设置 body 标签时遇到了一些问题。

我的目标是用背景颜色设置 HTML 标签，然后将 body 标签设置为 80% 宽度和不同的背景颜色，一切正常。

问题是背景颜色只下降一个屏幕高度然后结束，我似乎无法弄清楚为什么！

我的 CSS 是：

body { 
    width: 80%; 
    margin-left:auto; 
    margin-right: auto; 
    min-height:100%;
    height:100%;
    background-color: #FFFFFF;
    border-radius: 20px;
    -moz-border-radius: 20px
}

html { 
    background-color: #000000;
    height: 100%
}

header,nav,article {                            
    display: block
}

nav {
    float: left; 
    width: 20%
}

article {
    float: right; 
    width: 79%
}

任何建议都会很棒，谢谢。

编辑：在这里的所有建议之后，我可以使用我的 CSS 获得的最佳结果如下所示：

#content 
{ 
    width: 80%; 
    margin-left:auto; 
    margin-right: auto; 
    height:100%;
    min-height:500px;
    background-color: #FFFFFF;
    border-radius: 20px;
    -moz-border-radius: 20px;


}

html,body
{
    background-color: #000000;
    margin:0;
    padding:0;
    height: 100%;

}

header,nav,article 
{                           
    display: block
}

nav 
{
    float: left; 
    width: 20%
}

article 
{
    float: right; 
    width: 79%
}

它仍然没有做我想要的，但这是迄今为止最适合包装器的 CSS

【问题讨论】：

标签： html css

【解决方案1】：

之所以如此，是因为您已将 body 元素的高度明确设置为 100%；你只需要 min-height 属性，如果它应该总是至少一屏高。

我也不会将 body 元素的大小调整为 80% 宽度，我宁愿在 body 内使用一个元素。

【讨论】：

试过了，但我得到了相同的结果，我还尝试将所有内容都放在一个 Div 标签中，这似乎使问题变得更糟:(
我不是在发炎，我只是好奇，我也会避免将 80% 放在身体上——但为什么你、我和其他许多人会这样做？是否有充分的理由避免使用导致属性的布局来设置正文（和 html）的样式？
好问题丹贾。经过一些试验和错误后，我现在设法用 Div 替换了主体上的样式，但我也很好奇为什么我们需要避免这样做。

【解决方案2】：

可能有几个问题：

首先，尝试交换 min-height 和 height，因为通过在 min-height 之后设置 height，您实际上覆盖了 min-height。

其次，检查您的浏览器，即 7 及以下我相信不支持最小高度，尝试 w3schools 示例，看看他们的浏览器是否正常工作。

第三，您可能希望将内容包装在 html5 的内容选项卡中（使用 ie hack）或 div class="content" 因为 ie。再次无法正确显示正文标签。

最后，我将 min-height 设置为任意数量，例如 500px，因为 100% 只会确保它足够大以容纳其中的内容。

身高：100%；最小高度：500px;

【讨论】：

回到 HTML / CSS 比我想象的要棘手！我已经尝试了你的建议，但它仍然以相同的方式显示，在 px 中设置 min height 属性确实会影响背景，所以看起来高度标签可能没有做我想要的。我正在测试的浏览器也是新版本的FF和IE
我能问一下您的内容 div 中有什么吗？我们可以看看你的 html 吗？

【解决方案3】：

只给正文一个背景颜色，并在你的内容周围放置一个 div。如果您希望将整个内容居中设置为 body 宽度为 80%，则设置此包装 div 的样式是更好的方法。包裹 div 的方式也使圆角更容易。

生成的 html 示例：

<body>
<div id="wrapper">
.... Your content ....
</div> <!-- end of #wrapper -->
</body>

【讨论】：

可悲的是同样的问题，包装器的背景仍然没有完全下降:(

【解决方案4】：

背景颜色只下降一个屏幕高度然后结束，我似乎无法弄清楚为什么！

原因如下：

body { 
    height:100%;
}

html { 
    height: 100%;
}

问问自己：100% 的什么？答案是不是 100% 的内容。百分比高度总是指父元素高度的百分比。由于您没有设置任何明确的高度（以像素为单位），浏览器使用 viewport 的高度并将高度 body 计算为该高度的 100%。

viewport 是浏览器内的可视区域。由于您的内容延伸到该区域下方（即，您必须向下滚动才能查看全部内容），因此它最终位于 body 之外，因此位于 body 上设置的背景颜色之外。

如果您没有为html 或body 指定高度，它们将仅与内容一样高，但html 的背景仍将填充视口。

所以解决办法是这样的：

html {
    height:100%; 
    /* sets html to height of viewport 
      (bg color will still cover viewport) */
}
body {
    /* don't set explicit height */

    min-height:100%;
    /* expands body to height of html,
       but allows it to expand further
       if content is taller than viewport */
}

您不需要任何额外的内容元素； body 的行为与任何其他元素一样。只有html 有点不同，因为即使计算出的高度与视口或任何子元素不同，它的背景色也会覆盖整个视口。

您可能需要一些技巧来处理不理解最小高度的旧浏览器。

【讨论】：

谢谢 Doug，我认为这里可能还有其他问题，因为我尝试按照您的建议进行操作，但似乎没有解决问题
我刚刚注意到你已经浮动了正文的所有子元素（文章和导航）。如果你这样做，body 将不再扩展以包含那些浮动元素，除非你 a) 也浮动 body（在这种情况下它将不再居中）或 b) 添加一个清除浮动的方法。您可以在 Google 上找到许多浮动清除方法。这是一个很好的：h5bp.com/q