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

最佳答案

这是一个开放式的问题,但我认为您可能想尝试使用媒体查询,特别是使用max-widthmax-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根据视口的更改大小。

关于html - 如何使容器div高度适合窗口高度,但不随窗口大小调整大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37972136/

10-12 12:26
查看更多