JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<nav>
    <div id="innerNav">
        <a href="">ici mon logo</a>
		<div id="imgProfil">
            <a href="" title="Accueil du site">ici une photo</a>
        </div>
        <div id="bt_param1"><a href="" title="Déconnexion"><img src="img/deco.png" width="18" height="18" alt="deco.png" /></a></div>
        <div id="bt_param2"><a href="" title="Mes paramètres"><img src="img/btParam-Blue.png" width="18" height="18" alt="btParam-Blue.png"/></a></div>
        <div id="bt_param3"><a href="" title="Ma messagerie"><img src="img/enveloppe-Blue.png" width="19" height="10" alt="enveloppe-Blue.png"/></a></div>
		<div class="bt_menu">
            <img src="img/coeur.png" width="13" height="13" alt="coeur.png"/> <a href="">menu 1</a>
		</div>
		<hr />
		<div class="bt_menu">
            <img src="img/emploi.png" width="13" height="13" alt="emploi.png"/> <a href="">Menu 2</a>
		</div>
	    <hr />
		<div class="bt_menu">
            <img src="img/prof.png" width="13" height="13" alt="prof.png"/> <a href="">Menu 3</a>
		</div>
		<hr />
		<div class="bt_menu">
            <img src="img/manette.png" width="13"  height="13" alt="manette.png" /> <a href="">menu 4</a>
		</div>
		<hr />
	</div>
</nav>

<header>
    <div id="zoneAmis">Mes amis </div>
</header>
	
<section>
    <div id="innerSection">
        Ici du contenu qui devra pouvoir être scroller en sachant que le cadre blanc lui doit occuper toute la hauteur alors que là, ça n'est pas encore le cas
	</div>
</section>

<aside>
	<div id="innerPub">- Publicités -</div>
</aside>

CSS

body {
	background-color:#4eb0e8;
	margin:0;
	color: grey;
	font-family:Arial, Helvetica, sans-serif;
	height:100%;
	font-size:14px;
}
nav {
	width:174px;
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	background:#292929;
	z-index:10;
	min-height:100%;
}

header {
	height:55px;
	position:fixed;
	top:0;
	right:0;
	left:174px;
	background-color:#484848;
	color:#4eb0e8;
	z-index:2;
    line-height:55px;
}

section {
	background:white;
	height:100%;
	position:relative;
	top:0;
	left:174px;
	bottom:0;
	z-index:1;
	display:block;
    width:80%;
    margin-right:200px;
}
aside {
	background:white;
	position:fixed;
	top:55px;
	right:0;
	bottom:0;
	width:175px;
	z-index:1;
	text-align:center;
	min-height:100%;
}
#innerSection {
    width:100%;
	margin:0;
	padding:75px 15px;
	height:100%;
}

#innerNav {
	width:165px;
	margin: 0 auto;
	text-align:center;
	position:relative;
	min-height:100%
}