前端 - 如何在overflow:hidden的容器里让一个容器overflow:auto

Question

DOM结构如下：

<p class='mian'>
    <p class='container'>
        <p class='leftmenu'>
        <p>
        <p class='content'>
        <p>
    <p>
<p>

css：

.mian{
    height:100%;
    overflow:hidden;
}
.leftmenu{
    height:100%
    overflow:auto;
}
.content{
    height:100%
    overflow:auto;
}

我的需求是main不要出现滚动条，当leftmenu或者content溢出的时候出现滚动条。

Answer 1

height: 100% 恐怕不会像你相像的那样起作用，一般情况下建议

css.main {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

这样 .main 会撑满整个窗口，里面的 .leftmenu 和 .content 可以不变，但需要设置宽度，最好是 .leftmenu 设置宽度，.content 设置 margin-left。为了不折行，可以分别设置 float: left、float: right。

https://jsfiddle.net/jamesfancy/tqcdpoLx/1/

Answer 2

要想内部的带滚动条的话，最好是有固定值

Answer 3

最好与js 结合使用
main 的高度固定，overflow hidden
然后 把 .leftmenu 和 .content 的高度设为main的高度，之后设置overflow auto 就行