前端 - 如何在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 就行