網頁 css div 100% height 佔全滿螢幕

2021/04/05 Web

前言

想將網頁的某個 <div></div> 填滿整個螢幕大小可以透過三種方式實現。

方法一

第一種是先設定 bodyhtml 高度 100%,之後的 child 區域就會繼承。此時子區域高度在設定 100% 即可。

css

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.left {
    height: 100vh;
    width: 50%;
    background-color: rgb(91, 91, 255);
    float: left;
}

.right {
    height: 100vh;
    width: 50%;
    background-color: rgb(248, 85, 85);
    float: right;
}

html

<div class="left"></div>
<div class="right"></div>

方法二

1 vh 大約是佔版面的 1%,因此假設如果要填滿整個畫面就可以直接設定 100 vh

參考

css

html,
body {
    padding: 0;
    margin: 0;
}

.left {
    height: 100vh;
    width: 50%;
    background-color: rgb(91, 91, 255);
    float: left;
}

.right {
    height: 100vh;
    width: 50%;
    background-color: rgb(248, 85, 85);
    float: right;
}

html

<div class="left"></div>
<div class="right"></div>

方法三

第三種方法是透過 css 的 position: absolute; 來固定位置。因為 absolute 是有絕對位置的意思,因此可以很快速的指定區塊在螢幕中的方位與大小。

css

html,
body {
    padding: 0;
    margin: 0;
}

.left {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: rgb(91, 91, 255);
    top: 0;
    left: 0;
}

.right {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: rgb(248, 85, 85);
    top: 0;
    left: 50%;
}

html

<div class="left"></div>
<div class="right"></div>
鼓勵持續創作,支持化讚為賞!透過下方的 Like 拍手👏,讓創作者獲得額外收入~
版主10在2020年首次開設YouTube頻道,嘗試拍攝程式教學。想要了解更多的朋友歡迎關注我的頻道,您的訂閱就是最大的支持~如果想學其他什麼內容也歡迎許願XD
https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A

Search

    Table of Contents