我们如何根据屏幕分辨率（高度）为div高度编写css？

Question

我想根据屏幕高度为div高度添加一些css，div高度必须是屏幕高度。

任何人都可以帮忙吗？

Answer 1

了解@media screen

   @media screen and (max-width: 1024px) {
   div{width:1024px;} 
   }


   @media screen and (min-device-width: 1600px) {
   div {width: 1500px;}
   }


   @media screen and (max-device-width: 1600px) {
   div {width: 1500px;}
   }

另见

   div(width:calc(100% - 20px);}

和java脚本

 <div id="id" style="background-color:black;">text</div>
 <script>
 document.getElementById('id').style.width=screen.width;
 document.getElementById('id').style.height=screen.height;

   /*or*/

 document.getElementById('id').style.width=window.innerWidth;
 document.getElementById('id').style.height=window.innerHeight;
 </script>

Answer 2

您可以使用JavaScript来使用window.innerHeight获取窗口高度（请注意，此值不包括滚动条/工具栏）。

完整示例：

 var windowHeight = window.innerHeight;
 var div = document.getElementById("div");
 div.style.height = windowHeight

Answer 3

    div {
        background-color: red;
        height: 100vh;
    }