html - 如何使容器 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;
        }
    }

这是一个 fiddle :https://jsfiddle.net/9vwe255a/

尝试调整结果 Pane 的宽度和高度，您会注意到 div 的大小会根据视口(viewport)发生变化。