Panel Content Footer

by romario333

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 {
     width: 100%;
     /*height: @PanelHeaderHeight;*/
     height: 3em;
     border-bottom: 1px solid #ccc;
 }
 .panel > .footer {
     width: 100%;
     /*height: @PanelFooterHeight;*/
     height: 2em;
     border-top: 1px solid #ccc;
 }
 .panel > .content {
     width: 100%;
     height: calc(100% - 3em - 2em);
     overflow: auto;
 }