JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita consequuntur adipisci quaerat nesciunt, hic quasi accusantium aperiam atque dolore, quis molestiae consectetur eos, laboriosam modi sunt! Impedit, iusto, nulla!</div>
<div>Sint dignissimos accusantium ea, ratione, iure, porro numquam error ad cumque quae dicta. Sequi quae, adipisci, porro laboriosam incidunt beatae magnam, perferendis quis numquam voluptate unde laborum ipsa? Enim, itaque.</div>
<div>Autem, vel! Dolorum, quae harum rem maxime possimus! Nam aspernatur sapiente ducimus quo quisquam numquam nobis laborum itaque quod aut repellat, dolorem, ex labore corrupti porro, praesentium atque debitis distinctio?</div>
<div>Fuga magnam, fugit quam nihil praesentium consequuntur eum eius dolorum, quis illum dolorem, veritatis similique nesciunt rerum voluptas quidem. Earum culpa illum animi. Culpa, dicta quas assumenda. Ullam, tempora iusto.</div>
<div>Veritatis vero repudiandae est facere, doloremque? Incidunt dolorum laudantium perferendis, iusto repellendus, maxime quis perspiciatis veniam nemo, eligendi voluptas fugiat? Facere eum et vitae ipsam rerum modi veniam ratione similique.</div>
<div>Consequatur odio, distinctio aliquam fugiat odit nobis sequi consectetur sapiente placeat culpa incidunt architecto neque atque suscipit, soluta vero facilis voluptatum voluptates quis quo! Omnis iste exercitationem modi veniam placeat.</div>
<div>Ut magni quas est voluptatibus, perferendis laboriosam dignissimos temporibus animi qui natus recusandae eum id quod non provident sit itaque ea, pariatur quo saepe quia perspiciatis adipisci sed magnam. Maxime.</div>
<div>Molestiae quibusdam maxime voluptas dignissimos accusamus. Corporis saepe nisi officiis eaque necessitatibus possimus vel, ipsum aperiam. Dolor corporis rerum expedita repellendus sed, fugiat consequuntur incidunt...
CSS
html, body {
height: 100%;
}
// Высота в процентах является относительным значением. html -> body (относительно html) -> main (относительно body)
main {
height: 100vh;
... // other props
}
main {
float: left;
width: 70%;
box-shadow: 0px 0px 21px 14px rgba(0,0,0,0.75)
}
.left, .right {
width: 15%;
height: 100vh;
background: url(http://savepic.ru/14659146.png) repeat;
}
.left{
float: left
}
.right {
float: right
}