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);」を設定することです。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様