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: left
、float: right
。