隨著全面屏?xí)r代的到來(lái)，現(xiàn)在手機(jī)屏幕比例有很多種，在做H5頁(yè)面時(shí)，怎么能讓div撐滿整個(gè)手機(jī)屏幕呢？在本文中，我們將介紹兩種方法來(lái)實(shí)現(xiàn)這一目標(biāo)。方法一：針對(duì)只有一個(gè)DIV或者僅有一頁(yè)內(nèi)容的頁(yè)面首先，在H

隨著全面屏?xí)r代的到來(lái)，現(xiàn)在手機(jī)屏幕比例有很多種，在做H5頁(yè)面時(shí)，怎么能讓div撐滿整個(gè)手機(jī)屏幕呢？在本文中，我們將介紹兩種方法來(lái)實(shí)現(xiàn)這一目標(biāo)。

方法一：針對(duì)只有一個(gè)DIV或者僅有一頁(yè)內(nèi)容的頁(yè)面

首先，在HTML的`body`標(biāo)簽中添加一個(gè)`div`標(biāo)簽：

```html

```

然后，在CSS樣式表中定義以下樣式：

```css

* {

margin: 0;

padding: 0;

}

div {

width: 100%;

height: 100%;

background: ff0000;

position: absolute;

}

```

保存并刷新頁(yè)面，您會(huì)發(fā)現(xiàn)`div`已經(jīng)默認(rèn)撐滿了整個(gè)手機(jī)屏幕。

方法二：針對(duì)多個(gè)DIV的頁(yè)面

如果頁(yè)面中有多個(gè)`div`需要撐滿屏幕，我們可以使用另一種方法。

首先，在HTML的`body`標(biāo)簽中添加一個(gè)父容器`div`：

```html

```

然后，在CSS樣式表中定義以下樣式：

```css

* {

margin: 0;

padding: 0;

}

.container {

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

}

.content {

flex: 1;

background: ff0000;

}

```

上述代碼中，我們使用了flex布局，將父容器的高度設(shè)為100%，內(nèi)部的`.content`元素會(huì)根據(jù)剩余空間等比例分配高度，從而實(shí)現(xiàn)了自適應(yīng)的效果。

保存并刷新頁(yè)面，您會(huì)發(fā)現(xiàn)所有的`.content`元素都撐滿了整個(gè)手機(jī)屏幕。

總結(jié)

通過以上兩種方法，我們可以讓`div`元素自適應(yīng)不同尺寸的手機(jī)屏幕。如果頁(yè)面只有一個(gè)`div`或者僅有一頁(yè)的內(nèi)容，可以直接設(shè)置其寬高為100%；如果頁(yè)面中有多個(gè)`div`，則可以使用flex布局來(lái)實(shí)現(xiàn)自適應(yīng)效果。