JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="site-box">
<div class="container-fluid">
<div class="row">
<div class="header">
<!-- HEADER -->
<!-- Logo -->
<div class="col-xs-3 col-md-3">
<div class="header-logo">
<span class="logo">Zikle</span>
</div>
</div>
<!-- Search -->
<div class="col-md-6 hidden-xs hidden-sm">
<div class="header-search">
<div class="input-group">
<form class="header-search-form" role="search">
<input type="text" class="form-control" placeholder="Zoeken..." aria-label="Zoeken">
<span class="input-group-btn" id="basic-addon1"><button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button></span>
</form>
</div>
</div>
</div>
<!-- Control Panel -->
<div class="col-xs-9 col-md-3">
<div class="header-controlpanel"><div class="pull-right">
<span><kbd>Daniël</kbd></span> <img src="http://www.zikle.nl/userfiles/thumbs/0/2/5/4/02546700.png" width=40 height=40 style="border-radius: 50%; cursor: pointer">
</div></div>
</div>
</div>
</div>
<div class="row">
<!-- Left MENU -->
<div class="col-md-3...
CSS
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Zikle
========================================================================== */
body, html {
width: 100%;
height: 100%;
overflow: none;
margin-top: 2em;
}
body {
font-size: 14px;
font-family: Roboto,arial,sans-serif;
color: #111;
background-image: url("../img/bg-pattern.gif");
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
.site-box {
background: #fff;
border: 1px solid #eee;
...
JavaScript
$(function() {
function setHeight(elementToResize, elementToMatch){
$(elementToResize).height(elementToMatch.height());
}
//On initial load, resize sidebar
setHeight($('.side-menu'),$('.right-content-box'));
//On window resize, resize the sidebar
$(window).resize(function(){
setHeight($('.side-menu'),$('.right-content-box'));
});
});