搜尋

首頁  >  問答  >  主體

前端 - 如何在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 天前889

全部回覆(3)我來回復

  • 迷茫

    迷茫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: leftfloat: right

    https://jsfiddle.net/jamesfancy/tqcdpoLx/1/

    回覆
    0
  • PHPz

    PHPz2017-04-17 11:17:54

    要想內部的有捲軸的話,最好是有固定值

    回覆
    0
  • 黄舟

    黄舟2017-04-17 11:17:54

    最好與js 結合使用
    main 的高度固定,overflow hidden
    然後 把 .leftmenu 和 .content 的高度設為main的高度,之後設定overflow auto 就行

    回覆
    0
  • 取消回覆