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%
I’m afraid it won’t work as well as you think. It’s generally recommended
css
.main { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
In this way, .main
will fill the entire window. The .leftmenu
and .content
inside can remain unchanged, but the width needs to be set. The good thing is that .leftmenu
sets the width, and .content
sets margin-left
. In order not to break lines, you can set float: left
and float: right
respectively.
https://jsfiddle.net/jamesfancy/tqcdpoLx/1/
PHPz2017-04-17 11:17:54
If you want to have an internal scroll bar, it is best to have a fixed value
黄舟2017-04-17 11:17:54
Best used in conjunction with js
The height of main is fixed, overflow hidden
Then set the height of .leftmenu and .content to the height of main, and then set overflow auto