Question

我正在尝试创建一个设置，其中我有一个容器（见下图：蓝色），它保持16：9的宽高比，并始终适合屏幕（总是尽可能大，同时保持完全在浏览器窗口）。

然后它内部有一个div（绿色），它还保持16：9的宽高比并填充外部容器。

我需要能够在另一个包含不同数量文本的div（粉红色）之上。

它会压下绿色容器，但绿色容器必须保持16：9的宽高比。

我创建了一个JSFiddle来展示我到目前为止所尝试的内容，以及它是如何工作的。

我的HTML：

<div class="outer-container">
  <!-- 
    This container should never be taller than the browser viewport...
    Actually, it should never be taller than the height of the viewport,
    minus the height of my sites header and footer.
    (My site has no vertical scrollbar)

    So, if the browser grows really wide, this container should
    stop growing, once the height gets maxxxed out.
  -->

  <div class="inner-container">
    <div class="header-text">
      This is the header text. It can be any number of lines. It is dynamic text. It can be short or tall. This is the header text. It can be any number of lines. It is dynamic text. It can be short or tall. This is the header text. It can be any number of lines. It is dynamic text. It can be short or tall.
    </div> <!-- /.header-text -->
    <div class="content-container">
      <div class="wrapper">  
        This should always be 16:9 and fill all available height in the inner-container.
      </div> <!-- /.wrapper -->
    </div> <!-- /.content-container -->
  </div> <!-- /.inner-container -->
</div> <!-- /.outer-container -->

我的CSS：

.outer-container{

  background-color: #d5e4f3;

    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 1.778 */
    max-height: calc(100vh - 200px); /* subtracting header and footer */
    max-width: calc(177.78vh - 355px); /* 16/9 = 1.778, = 355/200*/
    margin: 100px auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */

  .inner-container{
    padding: 9px 16px;

    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    .header-text{
      background-color: #cab4d7;
      padding: 10px;
    }
    .content-container{
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #bad79d;

        max-height: 100%;

      >.wrapper{
        padding: 10px;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;        
      }
    }
  }
}

在那个例子中，我让外部容器做我想做的事。

它保持16：9的宽高比，并填充可用的屏幕空间，但一旦高度或宽度到达浏览器视口的边缘，就会停止增长。

我的内部容器保持16：9的宽高比，但我无法弄清楚如何让它保持在它的容器内。

提前致谢！

Div保持纵横比，同时填充容器，同时保持纵横比并填充屏幕

0 个答案: