Question

任何人都可以向我解释下面的小提琴是overflowing the 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 value时，为什么height not be 100%和bottom be 0

  .row > .sidebar-fixed{
        position: absolute;
        top: 60px;
        width: 220px;
        height: 100%; // should replaced by bottom: 0;
        overflow-y:scroll;
    }

Answer 1

高度的百分比值与元素的containing block相关。

如果绝对定位的元素没有任何定位的祖先（position与static不同），则其包含的块将是initial containing block，在这种情况下100% height计算视口的高度。

当您定义height属性而没有bottom属性时，top属性将简单地偏移元素的位置，但不会更改其定义的高度。

bottom:0将元素的边距框的底边与包含块的填充框的底边对齐。（ref，demo）

要演示初始包含块，高度和定位行为，请参阅this demo。

Answer 2

有什么令人惊讶的？ height: 100%表示将元素高度设置为其父级的100％，同时指定父级高度。然后，您将其位置从顶部设置为60px，但它根本不会更改元素高度。所以它的底边比视口低60px是很自然的。

对于bottom: 0，当您指定top属性时，元素的上边缘位于相对于其父级的上边缘的指定高度position: relative|absolute。当您指定bottom属性时，元素的下边缘将放置在其父级的指定高度position: absolute|relative。同时指定这两个属性会导致元素拉伸。这实际上是指定元素高度的常用方法。

溢出视口

2 个答案: