如何让div高度占满浏览器窗口

如何让div高度占满浏览器窗口

技术背景

在前端开发中，有时需要让一个div元素的高度占满整个浏览器窗口。传统的height: 100%在某些情况下可能无法达到预期效果，因此需要借助一些CSS3的特性来实现这一需求。

实现步骤

方法一：使用视口单位vh

视口单位vh表示视口高度的百分比，1vh等于视口高度的1%，因此100vh就等于视口的高度。

1
<div></div>
1
2
3
div {
    height: 100vh;
}

方法二：设置html和body高度为100%

先将html和body的高度设置为100%，然后再将div的高度设置为100%。

1
2
3
<body>
    <div id="right"></div>
</body>
1
2
3
4
5
6
7
body, html {
    height: 100%;
}

#right {
    height: 100%;
}

方法三：使用绝对定位

通过绝对定位将元素的顶部和底部都设置为0，使其占满整个视口高度。

1
<div style="position: absolute; top: 0; bottom: 0;"></div>

方法四：使用flex布局

使用flex布局可以很方便地让子元素占满父元素的可用空间。

1
2
<div class="left">left</div>
<div class="right">right</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html, body {
    height: 100%;
}
body {
    display: flex;
}

.left, .right {
    flex: 1;
}

.left {
    background: orange;
}

.right {
    background: cyan;
}

核心代码

使用视口单位vh

1
<div id="my-div">Hello World!</div>
1
2
3
#my-div {
    height: 100vh;
}

使用flex布局

1
2
3
4
<div class="wrapper">
    <div class="div-left"></div>
    <div class="div-right"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html,
body {
    height: 100%;
    min-height: 100%;
}
.wrapper {
    height: 100%;
    min-height: 100%;
    display: flex;
}
.div-left {
    width: 50%;
    background: green;
}
.div-right {
    width: 50%;
    background: gray;
}

最佳实践

响应式布局

使用视口单位vh和vw可以实现响应式布局，让div元素的高度和宽度随着视口的变化而自动调整。

兼容性处理

对于不支持vh单位的浏览器，可以使用JavaScript进行兼容性处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 检测浏览器是否支持vh单位
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
        var height = parseInt(window.innerHeight/2, 10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"], 10);

        bool = !!(compStyle == height);
    });
    return bool;
});

// 如果不支持vh单位，则使用JavaScript设置高度
$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});

常见问题

100vh和100%的区别

100%的高度是相对于父元素的高度，而100vh是相对于视口的高度。例如：

1
2
3
4
5
<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

这里的p标签设置为height: 100%，但它的高度是其父元素div的高度（200px），而不是body的高度。如果使用100vh，则p标签的高度将是视口的高度。

移动设备上100vh的问题

在移动设备上，浏览器的UI可能会占用一些屏幕空间，导致100vh的效果不理想。从2023年开始，引入了新的单位，如dvh、lhv和svh，可以实现动态高度，而无需使用JavaScript。

1
2
3
4
.yourElement {
    height: 100vh; /* fallback */
    height: 100dvh; /* dynamic viewport height */
}
前端开发 > CSS布局
#前端开发 #HTML #CSS #视口单位 #flex布局
如何让div高度占满浏览器窗口
https://119291.xyz/posts/2025-05-13.how-to-make-a-div-100-percent-height-of-the-browser-window/
作者
ww
发布于
2025年5月13日
许可协议