問題
要素の幅をウインドウの幅を基準に設定したい。
解決策
単位で「vw」を使用する。
要素の幅をウインドウの幅を基準に設定するには？
要素の幅をウインドウの幅を基準に設定できる「vw」の使用例をご紹介します。
DEMOはこちら
ウインドウ下部に幅いっぱいで表示されてます。
表示のデモです。
単位「vw」を使用する
cssで「○○vw」を設定することで、ウインドウの幅を基準に設定することができます。
HTML
<div class="vw-box">
<p class="text">テキスト</p>
</div>CSS
.vw-box{
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: 10px 0;
text-align: center;
background-color: #FCECE8;
}
コメント