CSS:ウィンドウ全体の内側にボーダーをつける
![表示領域の内側に余白を設けた状態で、ボーダーを表示領域に追従させたい。](https://edge.sincar.jp/wp/wp-content/uploads/2014/06/mv.png)
ウィンドウ全体の少し内側にボーダーをつける方法をメモ。デモはこちら。
解決策
いろいろと試行錯誤した結果、以下の方法で実装できました。 IE8〜、Chrome、Safari、Firefoxで想定通りの挙動を確認しています。 :before擬似要素を使用しますので、IE6〜7ではボーダー自体が表示されませんが、それ以上の問題はありません。HTML
<div id="border"></div>
CSS
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#border {
position: absolute;
z-index: 1;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#border:before {
content: ” “;
display: block;
height: 100%;
min-height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 4px solid #baa775;
}