JSFiddle - React, Tailwind, and code Playground

HTML

<head>
		<title> My document </title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" href="style1.css">
	</head>
		
	<body>
		<div class="header">Шапка сайта</div>
		<div class="layout">
			<div class="col1">Колонка 1 <p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				
			</div>
			<div class="col2">Колонка 2
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
				<p>f fk jdkf dfk jdfjkd dkf jdkfj </p>
			</div>
			<div class="col3">Колонка 3</div>
			<div class="clear"></div>
			<div class="col11"></div>
			<div class="col31"></div>
			<div class="clear"></div>
			<div class="hFooter"></div>
		</div>
		<div class="footer">NIZ</div>
		
	</body>

CSS

.layout { position: relative; /* Относительное позиционирование */ }
.layout DIV { position: absolute; /* Абсолютное позиционирование */ 
top: 50px; min-height:100%}

.col1 { background: #C7E3E4; width: 250px; margin:0 auto -100px; position:fixed !important;}
.col2 { background: #E0D2C7; left: 250px; right: 250px;}
.col3 { background: #ECD5DE; width: 250px; right: 0;}

.col11 { background: red; 
width: 250px; 
position:fixed !important; 
height:100%;
min-height:100%;
height: auto !important; 
z-index:-1;
}

.col31 { background: #ECD5DE; 
width: 250px; 
right: 0; 
position:fixed !important; 
height:100%; 
z-index:-1;
}

.header { background: #D5BAE4;
position: fixed;
z-index:1;
width:100%;
height:50px;}
clear{clear:both}
.footer {background: green;
position:absolute;
width:100%;
height50px;
margin-top: -40px;
bottom:0;
z-index:2}

.hFooter {
height: 40px;
}

body{margin:0;
position:relative;
height:100%;
min-height:100%;
height:100% !important;
width:100%}

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}


p{padding: 50px 0;}