无法使用 css 单位 vw、vh 或百分比设置高度答案

【问题标题】：Cannot set height with css units vw, vh or percentage无法使用 css 单位 vw、vh 或百分比设置高度
【发布时间】：2015-07-24 14:58:24
【问题描述】：

我在 Ionic 应用程序中将div 的宽度和高度分别设置为视口宽度和高度的比例。这在我的计算机上的资源管理器和 Android 4.4 的设备上运行良好。但是，这个属性似乎对 Android 4.2 没有影响（高度限制为文本高度）。如果我将vh 替换为%，它会继续在v4.4 上运行，但在v4.2 上仍然不行。

这是我的代码

HTML

<body ng-app="starter">
    <ion-pane>
        <ion-content ng-controller="langController">

            ...

            <div id="language-selector" class="row">
                <h2>Idioma</h2>
            </div>

            ...

         </ion-content>
    </ion-pane>
</body>

CSS

#language-selector{
    height: 10vh !important;
    padding: 0;
    background-color: #d1d3d4;
}

如何在 Android v4.2 上进行这项工作？

提前感谢您的帮助。

【问题讨论】：

我的回答对您有帮助吗？请投票或/并标记为答案。 :)

标签： android css cordova ionic-framework

【解决方案1】：

这个问题有一个类似的question，唯一的解决方案似乎是编写一个JS函数来更新Android

另请参阅CanIUse。

一种 JavaScript 解决方案可能是：

// set initial height
document.getElementById("myDiv").style.height = (window.innerHeight / 10) + "px";
// change height on every resize event
window.onresize = function () {
    document.getElementById("myDiv").style.height = (window.innerHeight / 10) + "px";
}

尝试一下并调整窗口高度： http://jsfiddle.net/3eb68vf2/1/

希望对你有帮助！

【讨论】：