JSFiddle - React, Tailwind, and code Playground

by Sagar Awasthi

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<body>
	<div class="container">
		<div class="row header">
			<div class="col-xs-3" style="height: 100px; background: black;">
				
			</div>

			<div class="col-xs-9 header-line" style="height: 100px; background: black;">
				<ul>
					<li><a href=""><i class="fa fa-home fa-2x"></i></a>
					</li>
					<li><a href=""><i class="fa fa-envelope fa-2x"></i></a>
					</li>
					<li><a href=""><i class="fa fa-print fa-2x"></i></a>
					</li>
					<li><a href=""><i class="fa fa-facebook-square fa-2x"></i></a>
					</li>
					<li><a href=""><i class="fa fa-search fa-2x"></i></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="main">
			<div class="col-xs-3 main-menu">
				<h4>Subheading</h4>
				<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

				<h4>Subheading</h4>
				<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

				<h4>Subheading</h4>
				<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</div>

			<div class="col-xs-6 main-content">
				<h1>Willkommen</h1>
				<p><strong>Der tcbe.ch - ICT Cluster Bern, Switzerland ist ein Zusammenschluss von Unternehmen, Ausbildungsinstitutionen, Verb&auml;nden und Beh&ouml;rden mit dem Ziel, das Thema und den Sektor Telekommunikation- und Informatik (ICT)&nbsp;unseres Wirtschaftsraumes zu st&auml;rken.</strong>
				</p>
				<div>Er koordiniert seine Aktivit&auml;ten mit der Clusterpolitik des Kantons Bern und f&ouml;rdert die nachhaltige und solide Entwicklung dieses Schwerpunktes. Mit seiner breiten Abst&uuml;tzung und den zielgerichteten Aktivit&auml;ten ist der tcbe.ch Ihr attraktiver und starker Partner in der Telekommunikation und...

CSS

html{
  height: 100%;
}

body, .container {
	height: 100%;
    min-height: 100%;
}

.row.table-row > [class*="col-"] {
    height: 100%;
}

.header,
.footer {
	padding-right: 15px;
	padding-left: 15px;
}

.header {
	height: 100px;
}

.footer {
	padding-top: 19px;
	color: #777;
	border-top: 1px solid #e5e5e5;
}

@media (min-width: 768px) {
	.container {
		max-width: 950px;
	}
}

.container-narrow > hr {
	margin: 30px 0;
}

@media screen and (min-width: 768px) {
	
}

.main-menu,
.main-list {
	background: #fff5cc;
}

.main-menu,
.main-list,
.main-content {
	height: 100%;
}

.header-line {
	height: 100%;
	background-image: url('../images/eyecatcher.jpg');
}

.logo {
	margin-top: 20px;
}

.header-line ul {
	float: right;
	margin: 10px;
}

.header-line ul li {
	display: inline-block;
	margin-left: 3px;
}

.header-line ul li a {
	color: white;
}

.header-line ul li a:hover {
	color: #ddd;
}

header {
	max-width: 950px;
	position: relative;
	margin: 0 auto;
	height: 100px;
}

JavaScript

$('.main-menu').css('height', screen.height);
$('.main-menu').css('min-height', screen.height);
$('.main-list').css('height', screen.height);
$('.main-list').css('min-height', screen.height);