圣杯布局

很长时间不写界面了，现在喜欢写js，刚刚看了一片写界面布局的文章，感觉很精妙。叫圣杯布局，具体实现代码如下：
html:

<header><h4>Header内容区</h4></header>

<div class="container">
    <div class="middle"><h4>中间弹性区</h4></div>
    <div class="left"><h4>左边栏</h4></div>
    <div class="right"><h4>右边栏</h4></div>
</div>

<footer><h4>Footer内容区</h4></footer>

css:

    .container{ 
            padding: 0  200px;
            height:200px;
            overflow:hidden;
        }
    .middle{
          width: 100%;
          height: 200px; 
          background-color: deeppink; 
          float:left;
        }
    .left{  
          position: relative; 
          left: -200px;  
          margin-left:-100%;
          width: 200px;
          height: 200px;
          background-color: #cddc39; 
          float:left;
        }
    .right{
            position: relative;
            right: -200px;  
            margin-left:-200px; 
            width: 200px;
            height: 200px;
            background-color: #2196f3; 
            float:left;
         }

        header{
          width: 100%;
          height: 40px;
          background-color: darkseagreen;
        }
    footer{
          width: 100%; 
          height: 30px;
          background-color: darkslategray;
        }

圣杯 圣杯