kapantzak kapantzak - 3 months ago 28
CSS Question

Body overflow-y hidden and scroll inner div only

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 the 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 #inner_content div is overflowed, I want to scroll the content only, and let the reamining page in its position.
I know I can do it if I apply position fixed, but I wonder if it can be done with this positioning.

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

EDIT



I managed to do this with jQuery like so: http://jsfiddle.net/qJ4qc/2/

Is there a way to accieve this only with css??

Answer

I found a solution setting

html, body {
  height: 100%;
}

Take a look at it here

Comments