css - 动态调整元素的高度，使它们始终保持在单个页面上

Question

我的页面上有几个元素

我希望能够根据屏幕高度动态更改高度A和动态，以便和元素始终保持在单个屏幕上而无需向下滚动。BAB

目前我正在使用媒体查询来调整我的元素的高度

@media screen and (min-width: 1920px) and (max-width: 5000px) {
  .A{
    height: 600x;
  }
  .B{
    margin-right: 400px;
  }
}

@media screen and (min-width: 1279px) and (max-width: 1919px) {
  .A{
    height: 550px;
  }
  .B{
    height: 350px;
}

但是这个解决方案有点傻，因为我更喜欢基于当前高度的高度A和B动态变化，而不需要为每个屏幕尺寸编写太多媒体查询，因为这可能很多。

有什么聪明的解决方案吗？

标签： csssassresponsive-design

Answer 1

  <!-- language: lang-css -->
    try this one

    * {
       margin:0;
       padding:0;
       box-sizing:border-box;
     }

     .container {
          height: 100vh; // this can gives (.container) height according to view screen
      }

     .a{
         height: calc(60vh - 40px);//minus the header height
       }

      .b{
         height: calc(40vh - 60px); //minus the footer height
        }



<!-- language: lang-html -->

    <div class="container">
      <header>header</header>
      <div class="a">A</div>
      <div class="b">B</div>
      <footer>footer</footer>
    </div>