如何使容器div高度適合窗口高度，但不根據窗口大小調整大小

Question

我正在使用以下代碼創建頁面布局。 我得到的容器div高度適合於窗口高度，但是當我調整窗口高度的大小時，所有內容垂直地被擠壓在一起。 如何確定容器div的高度和寬度？

 <style type="text/css">
    * {
        margin: 0;
        padding: 0; 
    }        

    #container {

        margin: 0 auto;
        width: 800px;  
        height:100vh;          
        background-color: azure;

    }

    #rw1 {
        height: 10vh;
        background-color: aliceblue;            
    }

    #rw2 {
        height: 80vh;
        background-color: #ff6a00;
    }

    #rw3 {
        height: 10vh;
        background-color: #808080;
    }
   </style>


   <div id="container">
       <div id="rw1"></div>
       <div id="rw2"></div>
       <div id="rw3"></div>
   </div>

Answer 1

這是一個開放式的問題，但我認為您可能想嘗試使用媒體查詢，特別是使用max-width和max-height的組合，如下所示：

@media (max-height: 300px) {
     #rw1 {
        height: 33vh;
        background-color: aliceblue;            
    }
    #rw2 {
        height: 33vh;
        background-color: #ff6a00;
    }
    #rw3 {
        height: 33vh;
        background-color: #808080;
    }
}

也可以將max-width / max-height如下：

@media (max-width: 767px), (max-height: 300px) {
         #container {
            width: 750px;  
        }
         #rw1 {
            height: 33vh;
            background-color: aliceblue;            
        }
        #rw2 {
            height: 33vh;
            background-color: #ff6a00;
        }
        #rw3 {
            height: 33vh;
            background-color: #808080;
        }
    }

這是一個小提琴： https : //jsfiddle.net/9vwe255a/

嘗試在“結果”窗格中調整寬度和高度的大小，您會注意到div根據視口的更改大小。