css 充滿div

在HTML網頁中，CSS（層疊樣式表）用于控制網頁的布局和樣式。有時候，我們希望將某個元素的寬度和高度設置為充滿父元素的大小，以便更好地適應不同設備的屏幕。本文將介紹使用CSS實現充滿div的幾個實例。

1. 充滿父元素寬度

<div class="wrapper">
<div class="content">
元素內容
</div>
</div>

/* CSS */
.wrapper {
width: 100%;
}
<br>
.content {
width: 100%;
}

在這個例子中，我們有一個帶有class為"wrapper"的div元素，它是父元素，以及一個帶有class為"content"的div元素，它是子元素。在CSS中，我們使用了width: 100%將父元素和子元素的寬度設置為100%，以使子元素充滿父元素的寬度。

2. 充滿父元素高度

<div class="wrapper">
<div class="content">
元素內容
</div>
</div>

/* CSS */
.wrapper {
height: 100vh;
}
<br>
.content {
height: 100%;
}

在這個例子中，我們使用了CSS中的height: 100vh;來將父元素的高度設置為視口的100%。視口是用戶當前可見的網頁區域。然后，我們使用height: 100%;來將子元素的高度設置為父元素的100%，以使子元素充滿父元素的高度。

3. 充滿父元素同時充滿寬度和高度

<div class="wrapper">
<div class="content">
元素內容
</div>
</div>

/* CSS */
.wrapper {
width: 100%;
height: 100vh;
}
<br>
.content {
width: 100%;
height: 100%;
}

在這個例子中，我們將上述兩個實例的CSS代碼結合到一起。我們設置了父元素的寬度為100%、高度為視口的100%。然后，我們設置了子元素的寬度和高度均為父元素的100%，以使子元素同時充滿父元素的寬度和高度。

一下，使用CSS充滿div的方法有很多種，可以根據具體的需求和布局來選擇合適的方法。這些方法可以讓我們的網頁在不同設備上都能夠良好地呈現，提升用戶的體驗。