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 就行