Panel Content Footer

by sberube

HTML

<body>
    <div class="panel with-footer with-header">
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</body>

CSS

* {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 .panel {
     position: absolute;
     height: 300px;
     width:300px;
     border: 1px solid #ccc;
 }
 .panel > .header {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100%;
     /*height: @PanelHederHeight;*/
     height: 2em;
     display: none;
     border-bottom: 1px solid #ccc;
 }
 .panel > .footer {
     position: absolute;
     left: 0px;
     bottom: 0px;
     width: 100%;
     /*height: @PanelFooterHeight;*/
     height: 2em;
     display: none;
     border-top: 1px solid #ccc;
 }
 .panel > .content {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100%;
     bottom: 0px;
     overflow:auto;
 }
 .panel.with-header > .header {
     display:block;
 }
 .panel.with-header > .content {
     /*top: @PanelHederHeight;*/
     top: 2em;
 }
 .panel.with-footer > .footer {
     display:block;
 }
 .panel.with-footer > .content {
     /*bottom: @PanelFooterHeight;*/
     bottom: 2em;
 }