Scrollbar without fixed height/Dynamic height with scrollbar

后端 未结 10 1510
没有蜡笔的小新
没有蜡笔的小新 2020-12-02 22:24

I have this HTML structure:

Dynamic height without scrollbar

10条回答
  •  Happy的楠姐
    2020-12-02 22:40

    Flexbox is a modern alternative that lets you do this without fixed heights or JavaScript.

    Setting display: flex; flex-direction: column; on the container and flex-shrink: 0; on the header and footer divs does the trick:

    HTML:

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    Dynamic size with scrollbar

    CSS:

    #body {
        position: absolute;
        top: 150px;
        left: 150px;
        height: 300px;
        width: 500px;
        border: black dashed 2px;
        display: flex;
        flex-direction: column;
    }
    
    #head {
        border: green solid 1px;
        flex-shrink: 0;
    }
    
    #content{
        border: red solid 1px;
        overflow-y: auto;
        /*height: 100%;*/
    }
    
    #foot {
        border: blue solid 1px;
        height: 50px;
        flex-shrink: 0;
    }
    

提交回复
热议问题