要素を全クライアント領域に広げる
要素をウィンドウのクライアント領域全体に広げる
方法
height: 100%, width: 100% にする。
height: 100% は html と body に定義する必要がある。html, body どちらか片方だけではうまく行かない。
body には margin: 0; padding: 0 の設定が必要。
position: fixed を使って、top, bottom, left, right を 0にする。
Keyword: ウィンドウ全部,ウィンドウ全体,ウィンドウいっぱい,画面全部,画面全体,画面いっぱい,画面サイズ全部,画面サイズ全体,画面サイズいっぱい
なぜ必要か?
ブラウザのウィンドウを広げたり縮めたりしても、スクロールバーを出さずにクライアント領域全体に何かを描画するときに必ず必要となる。
vw, vh 単位ができたので緩和されたかもしれない。
「画面の中央に寄せる」というのはよくあるが、そのためにはその基準となる割付けのためのボックスが必要となる。
何が問題か?
要素に対して、padding と margin がブラウザごとに異なるデフォルト値で設定されている。
html 要素と body 要素も padding と margin の影響を受けている。
HTMLはフロー型のレイアウトシステムであるため、要素の height は内側の要素の height で決まってしまう。width は逆に外側の要素のサイズ(body 要素の場合はクライアント領域の width)で決まる。(これが直感的ではない。)
要素に対して height: 100% と指定すると、外側の要素に対してのサイズに切り替わる。
postion:fixed, position:absolute の場合、width は内側の要素の width から求めることになる。
display: inline-block の場合、width は内側の要素の width から求めることになる。
100vw、100vh と100%との挙動が異なる。
ブラウザで動的にサイズが変わるような実装がある。(アドレスバーの動的な隠蔽など)
body 要素では何がダメなのか?
svg 要素や canvas 要素などは body 要素とは異なる。飽くまでコンテンツとしてのサイズが必要。
要素を差し込む場合は、差し込むためのプレースホルダとなる要素がそのサイズになる必要がある。
Reset CSS では何がダメなのか?
標準的なテキストまで設定が変わってしまう。
ユーザーによる指定より強く設定されるため、ユーザーの期待通りにならない。(提供者の期待通りにはなる)
アホの子でも意味が分かるようにする。(重要)
無闇に「または」(,) を使わない。
適切に分離することで、追加加工を容易にする。
body の直下の div をクライアント領域全体に広げるケース
code:sample.css
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
margin: 0;
padding: 0;
height: 100%;
}
合わせる方法
縮尺を拡大縮小して、クライアント領域に合わせる。
縮尺はそのままで、描画領域をクライアント領域に合わせる。
問題(やや別件)
画面サイズに合わせて表示内容を整えたい場合
その画面サイズ以外でどうやって揃えるか。
縮尺を縮めた状態で確認するのがベストと考えられる。
その画面サイズでUIが見えないときにどうやって揃えるか。
何らかのキー操作で揃えるか、マルチタッチなどで移動、拡大縮小する。
どんなにスクロールしても常にクライアント領域全体を示す矩形を作ることは可能か?
100vh, 100vw を使えば理論的には可能。しかし、実際には100vh, 100vw が正しくクライアント領域全体を示さないブラウザがある。(タイトルバー、アドレスバー、ツールバー、スクロールバーなどが考慮されていない)
浮かせた div をクライアント領域いっぱいに広げるケース
code:css
/* 本当はこれでよいはずだが */
.client_rect {
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
code:html
<div class="client_rect"></div>
100vw だと、スクロールバーの幅が計算に含まれるケースがある模様。
関連