Hidden content when position fixed and top>0

Question

Here is my example if you try to scroll down you will only get some content, and you can't view the last lines. How I might fix this?

div#scrollable {
    overflow-y: scroll;
    height: 100%;
    position: fixed;
    top: 100px;
}

I need:

Fixed div;
Offset of some value from the top;

Thanks

it's you're OK with HTML5 compliant browsers `height: calc(100% - 100px);` http://jsfiddle.net/AKL35/574/ — Roko C. Buljan, Sep 19 '14 at 13:55
`position:fixed; top:100px; bottom:0; overflow:auto;` - http://jsfiddle.net/AKL35/578/ — Pete, Sep 19 '14 at 14:01

score 3 · Accepted Answer · answered Sep 19 '14 at 14:02

3

Try the following:

div#scrollable {
    overflow-y: scroll;
    position: fixed;
    top: 100px;
    bottom: 0;
    width: 100%;
}

See demo: http://jsfiddle.net/audetwebdesign/a8dxhLra/

answered Sep 19 '14 at 14:02

Marc Audet

46,011
11
63
83

Thanks, this works (: my project is a lot more complex but this enlighten me. – Totty.js Sep 19 '14 at 14:07

score 0 · Answer 2 · answered Sep 19 '14 at 14:05

A solution would be using some kind of a flexible layout to adjust the height inside the fixed element. Here's a solution using display: table.

It creates a pseudo 100px height row, that pushes the #scrollable div down, making it fill the remaining space on the table.

http://jsfiddle.net/AKL35/581/

#fixed-wrapper {
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
}

#fixed-wrapper:before {
    display: table-row;
    content: "";
    height: 100px;
}

div#scrollable {
    overflow-y: scroll;
    height: 100%;
}

Hidden content when position fixed and top>0

2 Answers2