首页 > 开发 > CSS > 正文

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

2017-09-12 09:38:51  来源: 网友分享

DOM结构如下:

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

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: leftfloat: right

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