JSFiddle - React, Tailwind, and code Playground

by jiawen ge

HTML

<div id="container">
    <div id="header">Header Section</div>
    <div id="page" class="clearfix">
        <div id="left">Left sidebar</div>
        <div id="content">Main Content</div>
        <div id="right">Right Content</div>
    </div>
    <div class="push"><!-- not put anything here --></div>
</div>
<div id="footer">Footer Section</div>

CSS

html,
body{
    height: 100%;
    margin:0;
    padding:0;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
    height: 60px;
    clear:both;
}
/*==========其他div效果==========*/
#header {
    padding: 10px;
    background: lime;
}
#left {
    width: 18%;
    float: left;
    margin-right: 2%;
    background: orange;
}
#content{
    width: 60%;
    float: left;
    margin-right: 2%;
    background: green;
}
#right {
    width: 18%;
    float: left;
    background: yellow;
}
#footer {
    background: #f6c;
}

JavaScript

/*
如果你在div#container和div#footer容器外增加内容的话，新加进徕的元素需要进行绝对定位。



*/