身体溢出-y隐藏和滚动内部div只

Question

我有这个HTML结构：

<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>

和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;               
}

当#inner_content div中的内容溢出时，我只想滚动内容，并让重新定位页面处于其位置。 我知道如果我将位置固定，我可以做到，但我想知道是否可以通过这种定位来完成。

这是一个jsFiddle - ＆gt; http://jsfiddle.net/qJ4qc/

修改

我设法用jQuery这样做：http://jsfiddle.net/qJ4qc/2/

有没有办法只用css来解决这个问题？

Answer 1

我找到了解决方案设置

html, body {
  height: 100%;
}

看看here

Answer 2

body {
  height: 90%;
}

保持身体高度为90％，以避免内容被剪裁。