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溢出的时候出现滚动条。
迷茫2017-04-17 11:17:54
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/
黄舟2017-04-17 11:17:54
最好与js 结合使用
main 的高度固定,overflow hidden
然后 把 .leftmenu 和 .content 的高度设为main的高度,之后设置overflow auto 就行