html - 正文溢出-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 内的内容溢出时，我只想滚动内容，并让reaming 页面处于其位置。我知道如果我应用位置固定我可以做到，但我想知道是否可以通过这个定位来完成。

这是一个 jsFiddle -> http://jsfiddle.net/qJ4qc/

编辑

我设法用 jQuery 做到这一点，如下所示：http: //jsfiddle.net/qJ4qc/2/

有没有办法只用css来接受这个？

Answer 1

我找到了解决方案设置

html, body {
  height: 100%;
}

看看这里

Answer 2

body {
  height: 90%;
}

保持正文高度为 90% 以避免内容被剪裁。