Body dump is overflowed and hidden only inner div

Question

I have this HTML structure:

<div id="main_wrapper"> <header>Header</header> <div id="inner_wrapper"> <div id="left_menu">Left menu</div> <div id="content_wrapper"> <div id="inner_content"> <!-- CONTENT HERE --> </div> </div> </div> 

and CSS:

 body { overflow-y: hidden; } #main_wrapper { width: 100%; float: left; } header { width: 100%; float: left; background: #0072C6; color: #fff; padding: 10px 0; border-bottom: 7px solid #004477; } #inner_wrapper { width: 100%; float: left; } #left_menu { width: 220px; float: left; } #content_wrapper { margin-left: 220px; overflow-y: scroll; } #inner_content { width: 100%; float: left; background: #999; } 

When the content inside the #inner_content div is full, I want to scroll only the content and let the page refresh in its position. I know that I can do this if I fix a fixed position, but I wonder if this can be done with this positioning.

Here is jsFiddle -> http://jsfiddle.net/qJ4qc/

EDIT

I managed to do this using jQuery: http://jsfiddle.net/qJ4qc/2/

Is there any way to get this with css only ??

Answer 1

I found a solution setup

 html, body { height: 100%; } 

Take a look at it here.

Answer 2

 body { height: 90%; } 

Keep your body height 90% to avoid trimming the contents.