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

最新推荐文章于 2024-07-08 17:28:27 发布

coderYangs

最新推荐文章于 2024-07-08 17:28:27 发布

阅读量3.3k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/coderYangs/article/details/118382315

版权

上干货！！！

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

出现的问题请看代码和图

<!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>

在这里插入图片描述

coderYangs

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS解决子元素撑开父元素，父元素背景色无法铺满全屏问题

CSS解决子元素撑开父元素，父元素背景色无法铺满全屏文题上干货！！！假设父元素撑开整个页面背景色为蓝色，子元素背景色为粉色，高度撑开了父元素，出现滚动条，此时父元素背景色无法铺满，会出现白边出现的问题请看代码和图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text
复制链接

扫一扫