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

最新推荐文章于 2024-05-30 22:05:48 发布

大前端工程师

最新推荐文章于 2024-05-30 22:05:48 发布

阅读量6.6k

点赞数 3

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

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

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

版权

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

3 篇文章 1 订阅

订阅专栏

问题重述

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>

效果图

大前端工程师

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS设置元素高度占浏览器窗口宽度的100%

问题重述height:100%这个用法只有在父容器有高度的情况下才可以使用过的，可是我们的body它的高度是自适应它里面元素高度的。换句话说，通常body的高度并不是浏览器窗口高度的，所以你对下面的元素设置height:100%,并不能充满屏幕高度那我们怎么解决呢，其实很简单。请看代码：/*清除默认边距*/*{ margin: 0; padding: 0;}/*设置html标签高度为100%，body高度为100%*/html,body{ height: 100%;}html
复制链接

扫一扫

专栏目录