Div 100% height scroll

css height
simon picture simon · Nov 3, 2013 · Viewed 61.3k times · Source

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

Answer

Daniel Riemer picture Daniel Riemer · Nov 3, 2013

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

Related questions

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More
make div's height expand with its content

I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside <!-- head --> ... <!-- /head --> <body class="main"> <div id="container"> &…

Read More