谁能解释一下下面的 fiddle 是如何溢出视口(viewport)
的。
.row > .sidebar-fixed{
position: absolute;
top: 60px;
width: 220px;
height: 100%;
overflow-y:scroll;
}
.row > .sidebar-fixed.left{
left:0;
}
.row > .sidebar-fixed.right{
right:0;
}
.fixed-fixed {
margin: 0 240px;
}
http://www.bootply.com/X0Bie7aRN0
在指定或硬编码某些top 值
时,为什么height 不是100%
而bottom 是0
.row > .sidebar-fixed{
position: absolute;
top: 60px;
width: 220px;
height: 100%; // should replaced by bottom: 0;
overflow-y:scroll;
}
最佳答案
有什么好惊讶的? height: 100%
表示将元素高度设置为其父元素的 100%(如果也指定了父元素高度)。然后,您将其位置设置为距顶部 60px,但它根本不会更改元素高度。所以它的底部边缘在视口(viewport)下方 60px 是很自然的。
对于 bottom: 0
,当您指定 top
属性时 - 元素的上边缘放置在相对于其父元素的上边缘的指定高度处 position:relative|绝对
。当您指定 bottom
属性时,元素的底边将放置在其父元素的指定高度处,position: absolute|relative
。同时指定这两个属性会导致拉伸(stretch)元素。这实际上是一种很常见的指定元素高度的方法。
关于html - 溢出视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24650320/