身体包装上的滚动条但不是身体

时间:2014-08-01 18:22:16

标签: html css

我试图在我的内体包裹物上取一个滚动条,而不是身体本身:

CSS

body {
    overflow: hidden;
}

#body_wrap {
    overflow-y: auto;
    height: 100%;
}

HTML

<body class="index"><div id="body_wrap">

    <!-- Content with big height -->

</div> </body>

内容溢出(即:如果我删除所有样式,则有垂直滚动条)。但是使用上述样式我不会得到任何滚动条。由于#body_wrap包含了整个内容,因此我会在两种情况下将结果视为相似。但我在#body_wrap上没有滚动条。

如何隐藏滚动条并将它们放在子包装器上呢?

1 个答案:

答案 0 :(得分:1)

由于您使用#body_wrap上的百分比高度,因此您需要<html><body>的高度。没有它,你就会计算100%的undefined。

html,body {
    height:100%;
}

body {
    overflow:hidden;
}

#body_wrap {
    overflow-y: auto;
    height: 100%;
}

WORKING EXAMPLE