JSFiddle - React, Tailwind, and code Playground

by Youri Maratkanov

HTML

<body>
    <header>
        Шапка
    </header>
    <div class="container">

        <div class="users">
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
        </div>
        <div class="messages">
            Блок, заполняющий оставшееся пространство
        </div>

    </div>
    

    
    <footer>
        footer
    </footer>
    
    
</body>

CSS

body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: auto;
    height:100%;
}
*{
    border: 0px solid #000;
}

body{
    width:100%;
    height: 100%;
}


header, .users,.messages,footer{
    border: 1px solid #000;   
}


.container{
    width:100%;
    height: 100%;
    display: table;
    margin-top: 50px;

    
}

.users,.messages{
    display: table-cell;
    float:left;
    position: relative;

}

.users{
    width:200px;
}



header{
    position: absolute;
    top:0;
    height: 50px;
    width:100%;
    background-color: lime;

}



footer{
    background-color: lightblue;
    width:100%;
    
    height: 100px;
    bottom:0;
    position: absolute;
    z-index:1;
}