CSS的height问题

发表于 更新于 分类于 ， Waline： 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 1 分钟

关于height:100%和height:100vh的区别

  • 当元素没有内容时，设置height:100%，该元素不会被撑开，此时高度为0。

  • 但是设置height:100vh，该元素会被撑开屏幕高度一致。

移动端避免使用100vh

核心问题是移动浏览器具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。

解决此问题的一种方法是依靠javascript而不是CSS。页面加载时，将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分。如果地址栏可见，则window.innerHeight将为全屏的高度。如果地址栏是隐藏的，则window.innerHeight将是屏幕上可见部分的高度。

获取页面高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
*  1、
**/
// 获取内容高度
    var length = document.getElementById('index_main');
    var wW = window.innerWidth > 0 ? window.innerWidth : document.documentElement.clientWidth;
    var wH = window.innerHeight > 0 ? window.innerHeight : document.documentElement.clientHeight;
    length.style.width = "100%";
    length.style.height = wH + 'px';



/**
*  2、
**/
 // 屏幕方向改变，重新获取高度（主要是平板上）
        var mql = window.matchMedia('(orientation: portrait)');
        function handleOrientationChange(mql) {
            if (mql.matches) {
                //  竖屏 portrait
                getLength();
            } else {
                // 横屏 landscape
                getLength();
            }
        }
        // 输出当前屏幕模式
        handleOrientationChange(mql);
        // 监听屏幕模式变化
        mql.addListener(handleOrientationChange);

        function getLength() {
            var length = document.getElementById('main');
            var wH = window.innerHeight > 0 ? window.innerHeight : document.documentElement.clientHeight;
            length.style.width = "100%";
            length.style.height = wH + 'px';
        }