CSS样式BODY标签问题 [英] CSS styling BODY tag issue

问题描述

我无法在很长时间内完成任何CSS / HTML开发，并且在使用CSS对body标记设置样式时遇到一些问题。

I havent done any CSS / HTML development in a long time and im having some issues with styling the body tag using CSS.

我打算做的是HTML标签用背景颜色设置，然后将body标签设置为80％宽度和不同的背景颜色，这一切都可以正常工作。

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.

问题是背景

我的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.

编辑：在这里的所有建议后，我可以得到与我的CSS的最佳结果如下：

After all the suggestions here the best result i could get with my CSS looks like this:

#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

Its still not doing what I want but this is the CSS that works best with the wrapper so far

推荐答案

背景颜色只有一个屏幕高度下降然后结束，I
看起来不明白为什么！

the background colour only goes one screen height down then ends and I cant seem to figure out why!

这是原因：

body { 
    height:100%;
}

html { 
    height: 100%;
}

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

Ask yourself: 100% of what? The answer is not 100% of the content. Percentage heights always refer to a percentage of the height of the parent element. Since you have not set any explicit heights (in pixels), the browser uses the height of the viewport and calculates the height body to be 100% of that.

视口是浏览器中的可见区域。由于您的内容延伸到此区域以下（即，您必须向下滚动以查看所有内容），所以它在 body 之外，因此在 body 。

如果您未指定 html 或 body ，它们只会与内容一样高，但 html 的背景将仍然填充

If you don't specify a height for html or body, they will only be as tall as the content, but the background for html will still fill the viewport.

所以解决方案是：

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

You don't need any additional content elements; the body behaves like any other element. Only html is 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.

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

You may need some hacks to handle older browsers that don't understand min-height.

这篇关于CSS样式BODY标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！