我想让元素铺满全屏,但上方还有一个元素,所以用了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滚动条就消失了呢,而且居然达到了高度自适应的效果,缩放浏览器都不会出现滚动条,该怎么理解啊,这问题虽然解决了,但解决的我莫名其妙的
绝对定位和浮动是两码事,浮动是占据空间的,是否在最上层要看层叠上下文的关系,例如z-index
有关,不是浮动就一定是飘在最上面的.前面说的有错误,我更正下,就算是讨论吧,楼主。在一个正常的block后面加fixed元素,top都没设置,那么fixed的起始位置是上面元素的末尾,结合文章《层叠上下文,层叠顺序》.为了达到100%占据页面而不超出,我一般是这么写的
.head{
position: fixed;
width: 100%;
height: 100px;
background-color: blue;
}
.left{
height: 100%;
width: 150px;
background-color: red;
padding-top:100px;
}
你加了 fixed定位之后,就相当于浮起来了,不占文档流空间,但是这个定位是直接就整个浏览器的可视区域来的,超出去的会直接默认隐藏掉。