JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<div id="wrapper">
<div id="main">
    <div class="content">
    <h2>Страница с пустым содержимым!</h2>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
        Страница с пустым содержимым!<br>
    </div>
</div>
<div class="clear"></div>
<div id="left">
<h2>Футер левого блока прилеплен к низу страницы.</h2>
</div>
</div>

CSS

html, body
{
height: 100%;/* растягиваю всю страницу по высоте экрана */
margin: 0; /* убираем наружные отступы */
padding: 0; /* убираем внутренние отступы */
}
body
{
font-size: 14px; /* задаю размер текста для контента = 14px */
color: #000; /* задаю цвет текста = черный */
background: #fff ; /* задаю цвет фона = белый */
margin: 0; /* убираем наружные отступы */
padding: 0; /* убираем внутренние отступы */
}
 
#wrapper {
min-height: 100%; /* минимальная высота блока 100%,т.е. меньшей высоты данный блок никогда не будет */
height: auto !important; /* автоматическая высота для браузера IE */
height: 100%; /* высота блока = 100% */
position: relative; /* Положение элемента устанавливается относительно его исходного места на html-странице */
width:100%; /* ширина блока = 100%, растягиваем ширину на всю страницу*/
margin:0 auto; /* выравнивание блока по центру */
overflow-x:hidden; /* если блок не вмещается по ширине, то указываем не создавать полосу прокрутки по ширине */
background: #f0f0f0;
}
 
#main {
    float:right; 
    width: 80%;
    height: 100%;  
}

.content{
   margin-left:5%; /*Отступ контента от левой стороны */
   padding:15px; /* отступ для содержимого блока, со всех сторон = 15px */
}
 
.clear
{
clear: both; /* Отменяет обтекание элемента одновременно с правого и левого края.  */
}
 
/* Footer */
 
#left{
width: 205px;
height: 100%; 
background:#ddd;
float:left;
position:absolute;
top:0;
}