JSFiddle - React, Tailwind, and code Playground

HTML

<div id="global" >
    
      <!---<div id="Vertic" class="menu_vertical"> 
       <ul id="navigation2">
            <li><a href="#" title="aller à la section 1">i1</a></li>
            <li><a href="#" title="aller à la section 2">i2</a></li>
            <li><a href="#" title="aller à la section 3">i3</a></li>
            <li><a href="#" title="aller à la section 4">i4</a></li>
            <li><a href="#" title="aller à la section 5">i5</a></li>
       </ul> --->
        
    <div id="section1" >

    </div>
    
    <div id="section3" >    
      
    </div> 
    
    
    <div id="dock" > 
     <ul id="navigation">
            <li ><a href="#" title="aller à la section 1">&#8249;&#45;&#45;Item N° 1</a></li>
            <li><a href="#" title="aller à la section 2">Item N° 2</a></li>
            <li><a href="#" title="aller à la section 3">Item N° 3</a></li>
       </ul> 
    </div>
    <div id="section2">
    <div id="menuSection2" align="center";>
    </div>
    <div id="pNomPage" align="center";>Ma page
        <input name="nomDePage" id="nomDePage" type="button" value="Mon titre de page" />        
    </div> <HR width=90% align="center"/>   
    <div id="pAccueuil">    
    <input id="monBouton" name="monBouton" type="button" onclick="monBouton();" value="Mon Bouton" />
    </div>
    </div>
        
    <div id="footer">
        <ul>
             <li id="PremierItemBas" ><a href="#">Item1</a></li>
             <li id="DeuxiemeItemBas"><a href="#">Item2</a></li>
             <li id="DernierItemBas" ><a href="#">Item3</a></li>
        </ul>  
	</div>    
        
        
    </div>>

CSS

#global {
 position: absolute;
 left:0;
 width:100%;
 height:98%;    
 margin-left:0;
 padding-left:0; 
 margin-top : 0px; 
 background-color: white;/*pink;*/
 overflow-y:hidden;   
}

#section1 {
   position: absolute;
   float:left;
   margin-left:0;
   padding-left:0;
   width:5%;
   height:100%; 
   background-color: goldenrod;
}

#section2 {
position:absolute;  
margin-top:0;
padding-top:0;
margin-bottom:0;
padding-bottom:0;
top:100px;
left:50px;
width:70px;
height:260px;
overflow:auto;
background-color: white;   
color:black;    
}
#section3 { 
   position: relative; 
   margin-left:0;
   padding-left:0;
   float:right;
   width:5%;
   height:100%; 
   background-color: goldenrod; 
}


#dock {     
    clear:left;
    left:0;
	top: 0;
    /*height:5%;*/
    font-size: 18px;
    padding-top:0%;
	margin-top:0%;
    padding-bottom:0%;
	margin-bottom:0%;
    border-top: solid 0px;
	background:black url(images/noir-1.png) repeat-x;*/ 
    background:white; 
	position: fixed;
	width: 100%;
}

ul {
 padding:0;
 margin:0;
 list-style-type:none; 
 white-space:nowrap;
 }
li {
 margin-left:0px;
 float:left; /*pour IE*/
 width:32%;
 }


ul li a {
 /*display:block;*/
 float:left;   
 width:90px;
 line-height:25px; /*hauteur de l'image de fond*/
 /*background:url("http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads/2012/08/home.gif") no-repeat 0px -2px transparent;*/  
 color:#DCDCDC;
 text-decoration:none;
 text-align:center;
 }


#footer { 
    display:block;
    clear:left;
    left:0;
    font-size: 17px;
	bottom: 0;
    padding-top:0%;
	margin-top:0%;
    padding-bottom:0%;
	margin-bottom:0%;    
    border-top: solid 0px;
	background:black url(images/noir-1.png) repeat-x;  
	position: fixed;
	width: 100%;
}

#footer li #footer a {   
    display:block;
}

#PremierItemBas {
 left: 50;
 line-height:25px; /*hauteur de l'image de fond*/
 width:33%;
 text-align:center;   
 }

#DeuxiemeItemBas {

 display:block;
 float:left;   
 width:33%;
 line-height:25px;...

JavaScript

$(document).ready(function() {
    var posHaut = $("#dock").outerHeight();
    var hauteur = $("#global").outerHeight()- $("#dock").outerHeight() - $("#footer").outerHeight();
    var largeur = $("#global").outerWidth()- $("#section1").outerWidth() - $("#section3").outerWidth();
    var posGauche = $("#section1").outerWidth();
    $('head').append('<style>#section2{position:absolute;top:'+posHaut+'px;left:'+posGauche+'px;width:'+largeur+'px;height:'+hauteur+';overflow:auto;background-color:whitecolor:black;}</style>');

$('head').append('<style>#menuSection2{position:relative;top:0px;padding-top:0%;margin-top:0%;height:5%;background:green;}</style>');
    });