How to get this 2 columns layout (were one fits to content)

前端 未结 3 702
爱一瞬间的悲伤
爱一瞬间的悲伤 2021-01-06 14:33

Please note

  • the vertical scrollbars shoud show up when needed
  • left columns fits to width
  • right column takes the rest of the space
3条回答
  •  伪装坚强ぢ
    2021-01-06 14:50

    HTML

    CSS

    body, html {
        width: 100%;
        height: 100%;
        background-color: black;
        padding: 0;
        margin: 0;
    }
    .main {
        background-color: white;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
    }
    .main, .header, .left, .right, .mid, .footer {
        position: absolute;
    }
    .header {
        height: 100px;
        top: 0px;
        left: 0px;
        right: 0px;
        border-bottom: 4px solid black;
    }
    .mid {
        top: 104px;
        left: 0px;
        right: 0px;
        bottom: 14px;
    }
    .left {
        overflow-y:auto;
        width: 100px;
        top: 0px;
        bottom: 0px;
    }
    .right {
        overflow-y:auto;
        top: 0px;
        bottom: 0px;
        left: 100px;
        right: 0px;
        border-left: 4px solid black;
    }
    .footer {
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 10px;
        border-top: 4px solid black;
    }
    

    Working Fiddle (as shown in your post)

提交回复
热议问题