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

隨著全面屏時代的到來，現(xiàn)在手機屏幕比例有很多種，在做H5頁面時，怎么能讓div撐滿整個手機屏幕呢？在本文中，我們將介紹兩種方法來實現(xiàn)這一目標。

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

首先，在HTML的`body`標簽中添加一個`div`標簽：

```html

```

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

```css

* {

margin: 0;

padding: 0;

}

div {

width: 100%;

height: 100%;

background: ff0000;

position: absolute;

}

```

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

方法二：針對多個DIV的頁面

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

首先，在HTML的`body`標簽中添加一個父容器`div`：

```html

```

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

```css

* {

margin: 0;

padding: 0;

}

.container {

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

}

.content {

flex: 1;

background: ff0000;

}

```

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

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

總結

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