css - height：100%铺满全屏的问题
本文介绍了css - height：100%铺满全屏的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我想让元素铺满全屏，但上方还有一个元素，所以用了height：100%出现了滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.head{
height: 100px;
background-color: blue;
}
.left{
/*position: fixed;*/
height: 100%;
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="left"></div>
</body>
</html>效果如下图
但奇怪的是，如果给left加个position：fixed，滚动条居然消失了
如下图
这让我很费解，有滚动条我是能理解的，但凭什么加个fixed滚动条就消失了呢，而且居然达到了高度自适应的效果，缩放浏览器都不会出现滚动条，该怎么理解啊，这问题虽然解决了，但解决的我莫名其妙的
解决方案
你加了 fixed定位之后，就相当于浮起来了，不占文档流空间，但是这个定位是直接就整个浏览器的可视区域来的，超出去的会直接默认隐藏掉。
这篇关于css - height：100%铺满全屏的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
