关于background和height:100%的一些总结

最新推荐文章于 2025-05-15 08:28:14 发布

原创最新推荐文章于 2025-05-15 08:28:14 发布 · 8.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#body #background #height100图片自适应

HTML&&CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了解决CSS布局中背景颜色覆盖全屏的问题，通过设置html元素背景色实现预期效果；探讨了百分比高度的正确应用及浏览器兼容性问题；并分享了图片和背景图片自适应容器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.今天写练习的时候,给定body宽高，给定背景颜色background-color,但是并没有预期的背景颜色只出现在body给定宽高的区域，而是全屏幕。

HTML：

<body>
</body>

CSS:

body{
	width: 400px;
	height: 400px;
	margin: 0 auto; 
	padding: 10px;
	border: 10px solid red;
	background-color: gray;

}

然而却是这样的结果：

最后到segmentFault提问，有网友给了一个链接，据大神说：body的background起作用，而是body作为一个根结点起作用了，html标签未被激活，body但当类似于根结点的结点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，这就是为什么上面整个窗口屏幕的颜色都是灰的。

解决办法就是给html节点添加一个背景颜色就可以，当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。一旦html标签含有背景色，则body的背景色变成了正常的body标签（一个实实在在，普普通通标签）的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

大神的这篇文章比较详细的介绍了原因，点击这里查看详情

即CSS这样写：

html{
	background-color: #fff;
}
body{
	width: 400px;
	height: 400px;
	margin: 0 auto; 
	padding: 10px;
	border: 10px solid red;
	background-color: gray;

}

这样即可达到预期的效果：

2.也是根据上面的大神的文章，页面的html,height的高度100%的原因和默认的滚动条的设置：

一个对象高度是否可以使用百分比显示，取决于对象的父级对象，#id的父级是body，而浏览器默认状态下，是没有给body一个高度属性的，因此当我们直接设置#id为height:100%;时，不会产生任何效果，而当我们给body设置了100% 之后，它的子级对象#id的height:100%;便发生作用了，这便是浏览器解析规则引发的高度自适应问题。

但是为body设置高度只是ie6下有作用。而代码中除了给body应用之外，还给HTML对象也应用相同的样式设计，这样做的好处是使IE与firefox浏览器都能够实现高度自适应，而body却不是。另外，Firefox中的 HTML标签不是100%高度，因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。

页面没有填满一屏时，ie6/7会有默认的滚动条，可以通过设置html{overflow:hidden;}来隐藏掉。或者设置html{overflow:sroll;}所有浏览器显示滚动条。

3.图片自适应容器大小，这里img用到两个css样式，max-width:100%,height:auto;图片不会变形，不过当外部容器的高不够，图片会超出该容器

HTML：

<div>
	<img src="../images/6.jpg" alt="">
</div>

CSS：

div{
	width: 600px;
	height: 200px;
}
div img{
	max-width: 100%;
	height: auto;
}

4. 背景图片，设置background-size;图片也可很好的自适应容器大小，而且可以使用background-position来定位图片的位置

HTML：

<div>
</div>

CSS：

div{
	width: 500px;
	height: 300px;
	background: url(../images/6.jpg) no-repeat center center;
	background-size: cover; /*background-size 一般单独写*/
}

这样不论div宽高是怎么样，img背景图片都能很好的适应。