前端 - 如何在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% I’m afraid it won’t work as well as you think. It’s generally recommended

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

In this way, .main will fill the entire window. The .leftmenu and .content inside can remain unchanged, but the width needs to be set. The good thing is that .leftmenu sets the width, and .content sets margin-left. In order not to break lines, you can set float: left and float: right respectively.

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

Answer 2

If you want to have an internal scroll bar, it is best to have a fixed value

Answer 3

Best used in conjunction with js
The height of main is fixed, overflow hidden
Then set the height of .leftmenu and .content to the height of main, and then set overflow auto