如何使用媒体查询高度？答案

【问题标题】：how to use media query for height?如何使用媒体查询高度？
【发布时间】：2017-01-25 21:03:49
【问题描述】：

我正在从事网络项目（Angularjs）并面临一个问题。我给出了高度：80%，我的屏幕分辨率是 1280 x 1024。但是当我在笔记本电脑上打开同一个项目时（分辨率 1386*768）Div 变得不可见。我试过下面的代码

@media (min-height: 500px){
  #chatViewList 
    {
      overflow-y: auto;
      position: relative;
      height: 80%;
    }
}

请建议并帮助我。

【问题讨论】：

【解决方案1】：

父元素的高度是固定的吗？如果不是，则不能使用基于百分比的高度（有一些例外，但它们不太实用）。

我建议改用视口高度单位。 vh 允许您指定相对于视口窗口的高度。

@media (min-height: 500px) {
    #chatViewList {
        height: 80vh;
        overflow-y: auto;
        position: relative;
    }
}

【讨论】：

【解决方案2】：

VH 正是您所需要的！ height: 100vh; = 100% of device height 您当然可以使用 80vh 之类的设备高度的 80%。 VH 表示viewport height

【讨论】：

【解决方案3】：

当 div 是具有定义高度的父 div 的一部分时，您可以设置 div 的响应高度。

或者，您可以预先定义 div 的高度或根据各种常用高度动态指定静态值或者，尝试以下链接"

【讨论】：

【解决方案4】：

创建分辨率高度的媒体查询不是最佳做法。正如您在这里问的那样，我猜您正在尝试创建全屏网页。让它工作设置你的 html 标签和 body 标签高度 100%

例如：

html, body { 
    min-height: 100%; 
    hight: 100%;
}

像这样，您在网页高度上工作的任何分辨率都将保持 100%。然后根据需要添加 CSS 高度作为百分比。还要确保将min-height 和max-height 设置为all。

这是我在创建全屏网页时使用的一个小技巧

希望这会有所帮助

【讨论】：

【解决方案5】：

为了计算每个屏幕的屏幕高度，我们可以使用这个公式。

height:calc(100% - 200px);

计算高度并从中减去 200px。我们可以使用任何值代替 200px 例子

#div1 {

    height:calc(100% - 200px);  

}

如果屏幕大小为 1000，则生成的 div1 高度将为 800

【讨论】：