Div 100% height scroll

Question

At my page i have a navigation bar to the left that is 100% height and 25% width. It is working fine, but when there's scroll available, it destroys the background, and make it look ugly. The reason i think is that 100% height is only applied to the active window. What is the trick to have a div 100% height always, even if the user is scrolling?

Css of the navigation:

    width:25%;
    height:100%;
    float:left;
    color:#999999;

I have tried position:absolute with no results, also tried clear both. Need help :)

Fiddle

score 66 · Accepted Answer · answered Nov 03 '13 at 21:04

66

Using min-height: 100% instead of height: 100% should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/

answered Nov 03 '13 at 21:04

Daniel Riemer

861
8
13

This seems to work, but when I do this, I lose the scrolling on the sidenav, which was something I would have liked to keep. Anyone got any ideas on this? – Paul Samsotha Oct 25 '16 at 10:50
1

I guess we'll never know – Denny Aug 01 '18 at 08:15
Setting `min-height: 100%` and `height: auto` worked for me, when the content exceeded the height of the viewport. – larrydalmeida Aug 12 '18 at 10:15

score 3 · Answer 2 · answered Apr 24 '20 at 02:54

3

if you want the element to take 100% of the screen use min-height: 100vh and if you want it to take 100% of the parent element use min-height: 100%

answered Apr 24 '20 at 02:54

Alex Quintero

1,160
10
21

1

Thanks! Been searching for awhile and the `vh` units got me what I needed! – stsmurf Nov 28 '22 at 17:46

score 2 · Answer 3 · answered Jan 06 '22 at 03:36

2

I would rather use:

   height: 100%;
   overflow: auto;

answered Jan 06 '22 at 03:36

Si Thu

1,212
13
12

score 0 · Answer 4 · answered Mar 15 '20 at 15:14

I had a similar issue when I wanted to build an opaque overlay on top of a webpage. The overlay only covered the height of the browser window, not the total scrolling height of the page. I turned to Javascript to dynamically get the page height.

$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')

Div 100% height scroll

4 Answers4

Linked