html - 溢出视口(viewport)

Question

谁能解释一下下面的 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;
    }

Answer 1

有什么好惊讶的？ height: 100% 表示将元素高度设置为其父元素的 100%(如果也指定了父元素高度)。然后，您将其位置设置为距顶部 60px，但它根本不会更改元素高度。所以它的底部边缘在视口(viewport)下方 60px 是很自然的。

对于 bottom: 0，当您指定 top 属性时 - 元素的上边缘放置在相对于其父元素的上边缘的指定高度处 position:relative|绝对。当您指定 bottom 属性时，元素的底边将放置在其父元素的指定高度处，position: absolute|relative。同时指定这两个属性会导致拉伸(stretch)元素。这实际上是一种很常见的指定元素高度的方法。