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 sidebar</div>
    </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%;
}
#page {
    padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
    position: relative;
    margin-top: -60px;/*等于footer的高度*/
    height: 60px;
    clear:both;
    background: #c6f;
}
/*==========其他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;
}

JavaScript

/*第二种方案*/

/*
这种方案与前面的第一种方案的差距很小，主要体现在，

第二种方案中，html中footer容器是不再被container容器包裹的。

html，body，container容器的高度都已经被设为100%了，即container已经占据满了整个页面了，此时再添加footer容器，则footer必定会超出页面底部，而且会让页面出现滚动条。

所以，我们给footer添加一个负值的margin-top，将footer容器从屏幕外拉上来。这个负值的margin-top与footer的高度相同。

*/

/*
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。

缺点：
要给footer设置固定值，因此无法让footer部分自适应高度。
*/