CSSだけでウィンドウサイズぴったりのボックスを作る

html

<div class="wrapper">

<div class="header">
ヘッダー（固定サイズ）
</div>

<div class="body">
このdivが可変になります。
</div>

<div class="footer">
フッター（固定サイズ）
</div>

</div>

mixin

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

scss

.wrapper{
    @include box-sizing(border-box);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding:30px 0px 10px;
    margin: 0;
}
.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
}
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
}
.body{
    @include box-sizing(border-box);
    height: 100%;
    width: 100%;
    padding: 10px;
}

ポイントは「width: 100%;」の時にpaddingを設定する場合は必ず「@include box-sizing(border-box);」を設定することです。