如何根據屏幕分辨率（高度）爲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 Script

<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窗口的高度（注意，這個值EXCLUDES滾動條/工具欄）。

完整的示例：

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

Answer 3

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