CSS设置元素高度占浏览器窗口宽度的100%

最新推荐文章于 2025-03-20 10:14:08 发布

大前端工程师

最新推荐文章于 2025-03-20 10:14:08 发布

阅读量6.9k

点赞数 3

分类专栏： CSS布局技巧文章标签： html5

程麒阁-大连大学-软件工程学院

本文链接：https://blog.csdn.net/chengqige/article/details/118761898

版权

CSS布局技巧专栏收录该内容

3 篇文章

订阅专栏

本文讲述了如何在body高度自适应的情况下，通过设置html和body的高度为100%，确保元素占据整个屏幕。通过实例演示了如何让div占据屏幕50%高度，同时宽度覆盖全屏。关键在于理解元素的层级和高度继承原理。

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

问题重述

height:100%这个用法只有在父容器有高度的情况下才可以使用过的，可是我们的body它的高度是自适应它里面元素高度的。

换句话说，通常body的高度并不是浏览器窗口高度的，所以你对下面的元素设置height:100%,并不能充满屏幕高度

那我们怎么解决呢，其实很简单。

请看代码：

/*清除默认边距*/
*{
	margin: 0;
	padding: 0;
}
/*设置html标签高度为100%，body高度为100%*/
html,body{
	height: 100%;
}

html的父容器是什么？是浏览器窗口了，也就是根容器。我们设置html的高度为100%，实质上就是使得html充满整个浏览器高度。
body的父容器是什么?是html所以呢设置它的高度为100%，你应该明白其中的道理了

小案例

原理都懂了，我们实战一下：让一个div，使得它的高度为浏览器高度的50%，宽度占浏览器宽度的100%

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				font-size: 16px;
			}
			div{
				width: 100%;
				height: 50%;
				font-weight: bold;
				background: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>