网页铺满全屏，不需滚动条的设置方法

最新推荐文章于 2024-05-17 04:04:51 发布

qq_39239722

最新推荐文章于 2024-05-17 04:04:51 发布

阅读量1.4w

点赞数 2

分类专栏： html，css 文章标签： html css 全屏网页不需要滚动条

本文链接：https://blog.csdn.net/qq_39239722/article/details/73496669

版权

html，css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在很多网页流行使用铺满全屏，没有滚动条，上下轮播的首页产品介绍页面。（如2345看图王，支付宝等官网）

这种页面简洁大气，美观实用。但对刚接触html和css的人来说却有些高大上，不知道改如何做。

因为，通常设置width :100%有用。但高度却没用。(浏览器渲染方式的问题。不做详解。）

需要给body，html设置了height：100%才能做出铺满全屏的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,body{
				width:100%;
				height:100%;
				margin:0;
				padding:0;
				overflow: hidden;
			}
			.id{
				width:100%;
				height:100%;
				background:lime;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<div class="id"></div>
	</body>
</html>

qq_39239722

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
网页铺满全屏，不需滚动条的设置方法

通常设置width = 100%有用。但高度却没用。需要给body，html设置了height：100%才能做出铺满全屏的效果。html,body{width:100%;height:100%;margin:0;padding:0;overflow: hidden;}.id{width:100%;height:100%;bac
复制链接

扫一扫