JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content-left-border"></div>
<div id="content-right-border"></div>
<div id="wrapper">
<div id="header">
<div id="header-middle"></div>
<div id="header-left-border"></div>
<div id="header-right-border"></div>
</div>
<div id="body">
<div id="content"></div>
</div>
<div id="footer">
<div id="footer-middle"></div>
<div id="footer-left-border"></div>
<div id="footer-right-border"></div>
</div>
</div>
CSS
html, body {
padding:0;
margin:0;
height:100%; /* Needed for the containter height */
}
body {
}
#wrapper {
position:relative;
margin:0 auto; /* Center wrapper */
height:auto !important; /* normal browsers */
min-height:100%; /* normal browsers */
height:100%; /* IE6: treaded as min-height*/
background:green;
}
#header {
height:30px;
margin-left:30px;
margin-right:30px;
background:blue;
}
#header-left-border {
position:absolute;
width:30px;
height:30px;
left:0;
top:0;
z-index:8001;
background:black;
}
#header-right-border {
position:absolute;
width:30px;
height:30px;
right:0;
top:0;
z-index:8001;
background:black;
}
#body {
background:green;
min-height:600px;
min-width:600px;
}
#content-left-border {
position:fixed;
top:0;
left:0;
width:30px;
height:100%;
z-index:8000;
background:grey;
}
#content {
background:red;
width:600px;
height:600px;
margin-left:auto;
margin-right:auto;
}
#content-right-border {
position:fixed;
top:0;
right:0;
width:30px;
height:100%;
z-index:8000;
background:grey;
}
#footer {
position:absolute;
width:100%;
height:30px;
bottom:0;
background:orange;
}
#footer-left-border {
position:absolute;
width:30px;
height:30px;
left:0;
bottom:0;
z-index:8001;
background:black;
}
#footer-right-border {
position:absolute;
width:30px;
height:30px;
right:0;
top:0;
z-index:8001;
background:black;
}