Html 如何在css中设置整个页面的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9648910/
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
how to set the background color of the whole page in css
提问by rostam
I am trying to set the background color of the page at yumdom.comto yellow.
我正在尝试将yumdom.com上页面的背景颜色设置为黄色。
I have tried the following and it fails:
我尝试了以下方法但失败了：
body{ background-color: yellow;} /*only a sliver under the header turns yellow.*/
#doc3{ background-color: yellow;} /*result same as above*/
#bd { background-color: yellow;} /*result same as above*/
#yui-main { background-color: yellow;} /*a rectangle turns yellow ending at where the content ends. I want this rectangle to extend all the way to the footer.*/
Also note that if in the developer tools in Chrome I highlight either one of the html elements above, I get only a certain portion of the page highlighted. A footer and the section below the content remain un-highlighted.
另请注意，如果在 Chrome 中的开发人员工具中我突出显示上述任一 html 元素，我只会突出显示页面的特定部分。页脚和内容下方的部分保持未突出显示。
I want the yellow to fill the entire space between the header and the footer and leave no white space out.
我希望黄色填充页眉和页脚之间的整个空间，并且不留空白。
Note that we are using YUI Reset, Fonts, and Grids CSS templates V 2.8.0r4
请注意，我们使用的是 YUI 重置、字体和网格 CSS 模板 V 2.8.0r4
Many thanks!
非常感谢！
采纳答案by rostam
I already wrote up the answer to this but it seems to have been deleted. The issue was that YUI added background-color:whiteto the HTML element. I overwrote that and everything was easy to handle from there.
我已经写了这个答案，但它似乎已被删除。问题是 YUI 添加background-color:white到 HTML 元素。我覆盖了那个，一切都很容易从那里处理。
回答by Srilekhya
<html>
<head>
<title>
webpage
</title>
</head>
<body style="background-color:blue;text-align:center">
welcome to my page
</body>
</html>回答by IvanSoria_54
The body's size is dynamic, it is only as large as the size of its contents.
In the css file you could use:
* {background-color: black}// All elements now have a black background.
正文的大小是动态的，它仅与其内容的大小一样大。在 css 文件中，您可以使用：
* {background-color: black}// 所有元素现在都有黑色背景。
or
或者
html {background-color: black}// The page now have a black background, all elements remain the same.
html {background-color: black}// 页面现在有黑色背景，所有元素保持不变。
回答by Brian Hoover
The problem is that the body of the page isn't actually visible. The DIVs under have width of 100% and have background colors themselves that override the body CSS.
问题是页面的正文实际上并不可见。下面的 DIV 宽度为 100%，并且具有覆盖主体 CSS 的背景颜色。
To Fix the no-man's land, this might work. It's not elegant, but works.
为了修复无人区，这可能会奏效。它不优雅，但有效。
#doc3 {
margin: auto 10px;
width: auto;
height: 2000px;
background-color: yellow;
}
回答by David 'mArm' Ansermot
I've checked your source code and find to change to yellow you need to adds the yellow background color to : #left-padding, #right-padding, html, #hd, #main and #yui-main.
我检查了您的源代码，发现要更改为黄色，您需要将黄色背景色添加到：#left-padding、#right-padding、html、#hd、#main 和 #yui-main。
Hope it's what you wanted. See ya
希望这是你想要的。拜拜
回答by ScottS
Looks to me like you need to set the yellowon #doc3and then get rid of the whitethat is called out on the #yui-main(which is covering up the color of the #doc3). This gets you yellow between header and footer.
在我看来，您需要设置yellowon#doc3然后去掉在 thewhite上调用的那个#yui-main（它覆盖了 的颜色#doc3）。这会让你在页眉和页脚之间变黄。
