如何使容器 div 高度适合窗口高度但不随窗口大小调整大小答案

【问题标题】：how to make the container div height fit window height but do no resize with window size如何使容器 div 高度适合窗口高度但不随窗口大小调整大小
【发布时间】：2016-06-22 23:28:58
【问题描述】：

我正在使用以下代码来创建页面布局。我让容器 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>

【问题讨论】：

固定高度是什么意思？如果屏幕较短，您不希望内容挤在一起吗？
他们挤压，因为你使用了'vh'单位，他们的工作取决于视口高度。但是，我不明白整个问题！
@JacobGray 我的意思是当窗口最大时，div 适合屏幕的高度，但是当窗口大小改变时，内容不会被挤压。谢谢。

标签： html css

【解决方案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 的大小会根据视口发生变化。

【讨论】：