CSS解决子元素撑开父元素，父元素背景色无法铺满全屏问题

最新推荐文章于 2024-01-25 09:52:41 发布

原创最新推荐文章于 2024-01-25 09:52:41 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文介绍了解决网页中因子元素高度超出父元素而导致父元素背景出现白边的问题。通过将父元素的高度设置为最小高度100%，确保背景色始终铺满全屏。

上干货！！！

假设父元素撑开整个页面背景色为蓝色，子元素背景色为粉色，高度撑开了父元素，出现滚动条，此时父元素背景色无法铺满，会出现白边

出现的问题请看代码和图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{margin: 0;
		padding: 0;}
		body,html {
			width: 100%;
			height: 100%;
		}
		.fbox {
			background-color: aquamarine;
			width: 100%;
			height: 100%;
		}
		.zbox {
			width: 50%;
			height: 1400px;
			background-color: pink;
		}
	</style>
	<body>
		<div class="fbox">
			<div class="zbox"></div>
		</div>
	</body>
</html>

效果图如下：

在这里插入图片描述

这明显不是我们想要的结果，现在来解决它，让父元素的背景色始终会铺满全屏，不管子元素撑开多高

很简单，只需要把父元素高度设置为最小高度100%即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{margin: 0;
		padding: 0;}
		body,html {
			width: 100%;
			height: 100%;
		}
		.fbox {
			background-color: aquamarine;
			width: 100%;
			min-height: 100%;
		}
		.zbox {
			width: 50%;
			height: 1400px;
			background-color: pink;
		}
	</style>
	<body>
		<div class="fbox">
			<div class="zbox"></div>
		</div>
	</body>
</html>

在这里插入图片描述

CSS解决子元素撑开父元素，父元素背景色无法铺满全屏问题

上干货！！！

假设父元素撑开整个页面背景色为蓝色，子元素背景色为粉色，高度撑开了父元素，出现滚动条，此时父元素背景色无法铺满，会出现白边

出现的问题请看代码和图

效果图如下：

这明显不是我们想要的结果，现在来解决它， 让父元素的背景色始终会铺满全屏，不管子元素撑开多高

很简单，只需要把父元素高度设置为最小高度100%即可。

这明显不是我们想要的结果，现在来解决它，让父元素的背景色始终会铺满全屏，不管子元素撑开多高