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

问题描述

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溢出的时候出现滚动条。

问题解答

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/

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

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