Question

我很长时间没有完成任何CSS / HTML开发，并且我在使用CSS设置body标签样式时遇到了一些问题。

我的目标是将HTML标签设置为背景颜色，然后将正文标签设置为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

Answer 1

背景颜色只有一个屏幕高度向下然后结束我似乎无法弄明白为什么！

原因如下：

body { 
    height:100%;
}

html { 
    height: 100%;
}

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

视口是浏览器中的可查看区域。由于您的内容扩展到此区域以下（即，您必须向下滚动以查看全部内容），因此它最终会在body之外，因此超出body上设置的背景颜色。

如果您没有为html或body指定高度，它们只会与内容一样高，但html的背景仍会填充视口。< / p>

所以解决方案就是：

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有点不同，因为它的背景颜色将覆盖整个视口，即使计算的高度与视口或任何子元素不同。

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

Answer 2

这是因为你明确地将body元素的高度设置为100％;如果它应该总是至少有一个屏幕高，你只需要min-height属性。

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

Answer 3

可能存在一些问题：

首先，尝试更换最小高度和高度，因为通过在最小高度后设置高度，您可以有效地覆盖最小高度。

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

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

最后，我将min-height设置为arbritary amount，例如500px，因为100％只会确保它足够大以容纳内容。

身高：100％; 最小高度：500px;

Answer 4

仅为身体提供背景颜色，并在内容周围放置包装div。如果您希望将整个内容设置为设置主体宽度为80％，则更好地设置此包装div的样式。包装div的方式使圆角更容易。

结果html的一个例子：

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

CSS样式BODY标签问题

4 个答案: