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的{{1}}和@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; } }，如下所示：

{{1}}

这是一个小提琴：https://jsfiddle.net/9vwe255a/

尝试在宽度和高度上调整“结果”窗格的大小，您将根据视口注意到div的更改大小。

如何使容器div高度适合窗口高度，但不要调整窗口大小

1 个答案: