CODEWITHSUNDEEP
htmlcss
Shane
Shane

Reputation: 5677

Overflowing the viewport

Can anyone explain me on how the below fiddle is 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

When specifying or hardcoding some top value, why should the height not be 100% and bottom be 0

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

Upvotes: 0

Views: 1832

Answers (2)

Fabrício Matté
Fabrício Matté

Reputation: 70139

Height's percentage values are relative to the element's containing block.

Provided your absolutely positioned element does not have any positioned ancestor (with position different than static), its containing block will be the initial containing block, in that case 100% height computes to the height of the viewport.

When you have defined a height property, without a bottom property, the top property will simply offset the element's position, but will not alter its defined height.

bottom:0 aligns the element's margin-box's bottom edge with the containing block's padding-box's bottom edge. (ref, demo)

And to demonstrate the initial containing block, heights and positioning behavior, see this demo.

Upvotes: 1

Eternal1
Eternal1

Reputation: 5625

What is so surprising? height: 100% means setting an element height to 100% of its parent IF the parent height is specified too. Then, you set its position to 60px from top, but it doesn't change an element height at all. So it's quite natural that its bottom edge is 60px below a viewport.

As for bottom: 0, when you specify top property - element's top edge is placed at a specified height relative to the top edge of its parent with position: relative|absolute. When you specify bottom property, element's bottom edge is placed at a specified height of its parent with position: absolute|relative. Specifying both these properties at once lead to stretching the element. This is actually quite a common way of specifying an element height.

Upvotes: 1

Related Questions