search

Home  >  Q&A  >  body text

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

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溢出的时候出现滚动条。

天蓬老师天蓬老师2778 days ago890

reply all(3)I'll reply

  • 迷茫

    迷茫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/

    reply
    0
  • PHPz

    PHPz2017-04-17 11:17:54

    If you want to have an internal scroll bar, it is best to have a fixed value

    reply
    0
  • 黄舟

    黄舟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

    reply
    0
  • Cancelreply