JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div class="main-wrapper">
	<div>
		<header class="header tr">
			<div class="container">
				<div class="row">
					<div class="col-lg-6">
						<img src="Images/logo.png" class="img-fluid logo" alt="Here must be image"/>
					</div>
					<div class="col-lg-6">
						<h1>Header could have variable content height </h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
					</div>
				</div>
			</div>
		</header>
		<div class="container bordered content tr">
			<div class="row">
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all available space on screen and be scrollable.</p>
				<p>This section must take all...

CSS

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
html {position: relative;min-height: 100%;}
body {margin:0;}
.bordered {border-color:blue;background-color:#ccc;border-style: solid;margin:0 auto;}
.container {width: auto;padding: 0 15px;}
.header {background-color: #9d0010;}
.header h1 {color:white;font-style:italic;}		  
.footer {position: absolute;bottom: 0;width: 100%;height: 100px;background-color: #9d0010;box-sizing:border-box;overflow:hidden;}
.main-wrapper {height:calc(100vh - 100px);position:relative;}
.main-wrapper > div {position:absolute;top:0;left:0;width:100%;height:100%;overflow:auto;}
.main-wrapper > div {
  display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -moz-flex;display: -webkit-flex;display: flex;
  align-items: stretch;-webkit-flex-direction: column; flex-direction: column; 
}
.main-wrapper .header {flex: none;}
.main-wrapper .content {overflow:auto;}