JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="mainContainer">
<div class="topMenu"></div>
<div class="container">
<div class="leftMenu floatLeft">
</div>
<div class="information floatLeft">
Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания.
Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания.
Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания. Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания.
</div>
</div>
</div>
</body>
CSS
html,body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
html{
min-height: 100%;
height: 1px;
}
body{
height: 100%;
}
.mainContainer{
min-height: 100%;
height: 1px;
width: 100%;
}
.topMenu{
height: 50px;
width: 100%;
}
.container{
min-height: 100%;
height: 1px;
width: 100%;
background-color: yellow;
}
.leftMenu{
height: 100%;
width: 19%;
overflow-x: hidden;
background-color: red;
}
.information{
position: relative;
height: 100%;
width: 81%;
background-color: blue;
border: 1px solid #bbbbbb;
border-right-width: 0;
margin-left: -1px;
}
.floatLeft{
float: left;
}