如何使用媒体查询高度？

Question

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

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

请建议并帮助我。

Answer 1

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

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

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

浏览器支持：http://caniuse.com/#search=vh

Answer 2

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

Answer 3

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

或者，您可以预先定义div的高度或动态指定基于各种常用高度的静态值＆lt; - 可能是一种过度杀伤但可以工作。 或者，尝试以下链接＆＃34;

• https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438 OR
• http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Answer 4

创建媒体查询以达到分辨率高度并非最佳做法。你怎么在这里问我猜你试图创建全屏网页。使它工作设置你html标签和身体标签高度100％

前：

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

像这样，你在网页上工作的分辨率将保持100％。然后根据需要添加CSS高度百分比。此外，请务必将min-height和max-height设置为全部。

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

希望这会有所帮助

Answer 5

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

height:calc(100% - 200px);

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

#div1 {

    height:calc(100% - 200px);  

}

如果屏幕尺寸为1000，则产生的div1高度为800