Html CSS 样式 BODY 标签问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7528460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS styling BODY tag issue
提问by Purplegoldfish
I havent done any CSS / HTML development in a long time and im having some issues with styling the body tag using CSS.
我很长一段时间没有进行任何 CSS/HTML 开发，而且我在使用 CSS 设置 body 标签样式时遇到了一些问题。
What im aiming to do is have the HTML tag styled with a background colour, then styling the body tag to be 80% width and a different background colour which all works fine.
我的目标是让 HTML 标签具有背景颜色的样式，然后将 body 标签样式设置为 80% 宽度和不同的背景颜色，这一切正常。
The problem is that the background colour only goes one screen height down then ends and I cant seem to figure out why!
问题是背景颜色只下降一个屏幕高度然后结束，我似乎无法弄清楚为什么！
My CSS is:
我的 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%
}
Any suggestions would be great, thanks.
任何建议都会很棒，谢谢。
EDIT: After all the suggestions here the best result i could get with my CSS looks like this:
编辑：在所有建议之后，我可以用我的 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%
}
Its still not doing what I want but this is the CSS that works best with the wrapper so far
它仍然没有做我想要的，但这是迄今为止最适合包装器的 CSS
回答by Doug
the background colour only goes one screen height down then ends and I cant seem to figure out why!
背景颜色只下降一个屏幕高度然后结束，我似乎无法弄清楚为什么！
Here's why:
原因如下：
body {
height:100%;
}
html {
height: 100%;
}
Ask yourself: 100% of what?The answer is not100% of the content. Percentage heights always refer to a percentage of the height of the parentelement. Since you have not set any explicit heights (in pixels), the browser uses the height of the viewportand calculates the height bodyto be 100% of that.
问问自己：什么是100% ？答案不是100% 的内容。百分比高度总是指父元素高度的百分比。由于您没有设置任何明确的高度（以像素为单位），浏览器使用视口的高度并将高度计算为该高度的body100%。
The viewportis the viewable area inside your browser. Since your content extends below this area (i.e., you have to scroll down to see it all), it ends up outside the bodyand therefore outside the background color set on the body.
该视是你的浏览器中的可视区域。由于您的内容扩展了该区域下方（即，你必须向下滚动，看到这一切），它结束了外面的body，因此不在上的背景色设置body。
If you don't specify a height for htmlor body, they will only be as tall as the content, but the background for htmlwill still fill the viewport.
如果您没有为html或指定高度body，它们将只与内容一样高，但背景html仍将填充视口。
So the solution is this:
所以解决方案是这样的：
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 */
}
You don't need any additional content elements; the bodybehaves like any other element. Only htmlis a bit different since its background-color will cover the whole viewport even if the calculated height is different from the viewport or any child elements.
您不需要任何额外的内容元素；的body行为与任何其他元素一样。只有html一点不同，因为即使计算出的高度与视口或任何子元素不同，它的背景颜色也会覆盖整个视口。
You may need some hacks to handle older browsers that don't understand min-height.
您可能需要一些技巧来处理不理解 min-height 的旧浏览器。
回答by MH8
This is the case because you've explicitly set the height of the body element to 100%; you only need the min-height attribute if it should always be at least one screen high.
这是因为您已明确将 body 元素的高度设置为 100%；如果它总是至少一屏高，你只需要 min-height 属性。
I would also not resize the body element to 80% width, I'd rather use a element inside the body for this.
我也不会将 body 元素的大小调整为 80% 的宽度，我宁愿为此使用 body 内部的元素。
回答by Kimberly-Ann
There might be a few issues:
可能有几个问题：
Firstly, try swapping min-height and height because by setting height after min-height you are effectively overriding min-height.
首先，尝试交换 min-height 和 height，因为通过在 min-height 之后设置高度，您可以有效地覆盖 min-height。
Secondly, check your browser, ie 7 and below I belive don't support min-height, try w3schools examples to see if theirs work properly on your browser.
其次，检查您的浏览器，即 7 及以下我相信不支持 min-height，请尝试 w3schools 示例以查看它们是否在您的浏览器上正常工作。
Thirdly, you may want to wrap your content in either content tabs for html5 (with ie hack) or in a div class="content" because ie. again won't display the body tag correctly.
第三，您可能希望将您的内容包装在 html5 的内容选项卡中（使用 ie hack）或 div class="content" ，因为 ie。再次不会正确显示 body 标签。
Lastly, I'd set min-height to an arbritary amount for example 500px because 100% will just make sure it is large enough to hold the content within.
最后，我将 min-height 设置为一个任意值，例如 500px，因为 100% 将确保它足够大以容纳其中的内容。
height: 100%; min-height: 500px;
高度：100%；最小高度：500px；
回答by iwg
Give the body only a background color and put a wrapping div around your content. Styling this wrapping div is the better way if you want center the complete content as set bodies width to 80%. The way with the wrapping div makes the round corner also easier.
只给正文一个背景颜色，并在你的内容周围放置一个环绕的 div。如果您希望将整个内容居中设置为 80% 的主体宽度，则设置此包装 div 的样式是更好的方法。环绕 div 的方式使圆角也更容易。
An example of the resulting html:
生成的 html 示例：
<body>
<div id="wrapper">
.... Your content ....
</div> <!-- end of #wrapper -->
</body>
