如何让两个垂直元素的高度之一取决于另一个？答案

【问题标题】：How to let one of two vertical elements' height depend on another?如何让两个垂直元素的高度之一取决于另一个？
【发布时间】：2018-12-20 21:40:47
【问题描述】：

我正在开发一个圣诞礼物网站，上面只有两个元素，我想拥有这样的元素：

底部元素是一个图像，它应该与视口的底部对齐。它应该按比例调整大小，并占用视口宽度的最大 90% 和视口高度的最大 70%。上面的元素是一个文本元素，我希望它填充剩余的垂直空间并将该文本水平和垂直对齐到中心。

在这种情况下，如果底部元素占用70vh，解决方案很简单，上部元素应该占用30vh。但是如果底部元素比较小，上框的高度应该是（视口高度-上元素高度）。

这是我目前所拥有的。

body { 
    background-image: url('https://i.imgur.com/sWfZ8nq.png');
    background-repeat: repeat;
}

.fg {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
}

.fg div {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 30%;
}

.fg span {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 10vmin;
    letter-spacing: 3px;
    text-shadow:  2px  2px 2px green,
                  2px -2px 2px green,
                 -2px  2px 2px green,
                 -2px -2px 2px green;
}

.fg img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-height: 70%;
    max-width: 90%;
}

<html>
  <head>
    <title>HNY</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="fg">
      <div>
        <span>Happy new year!</span>
      </div>
      <img src="https://i.imgur.com/Ql8A585.png"/>
    </div>
  </body>
</html>

这适用于底部元素高度 = 70vh，例如分辨率 1920 x 1080。但如果我翻转它，即切换到 1080 x 1920，上框只需要 30vh，但我希望它填满空间。有什么建议吗？

【问题讨论】：

抱歉，这是一个不正确的副本，但您仍然可以使用弹性框来完成此操作
something like this?
我的图片看起来不合适：jsfiddle.net/7hkfmayx/2
是的，它使用对象适合来调整图像大小，但保持它的纵横比。如果您想保留完整图像，可以尝试使用contain 而不是封面：jsfiddle.net/7hkfmayx/3（但如果您使用它，则需要为 ie 使用 polyfill）
您的解决方案没有将底部元素与视口底部对齐（对不起，我忘了在我的问题中提及它）。除此之外，您的图像框的静态高度为 70vh，但我希望它是可变的，最大限制为 70vh i.imgur.com/0o9jk81.png

标签： html css responsive-design

【解决方案1】：

我为此使用了网格 css。我将 .fg 设置为 100vh 并将主体边距设置为 0 以避免溢出问题。因为您需要上部来响应 img 大小，所以我将网格行设置为：grid-template-rows: 1fr auto;，这意味着网格的上半部分占据了剩余空间。还将图像位置更改为相对以使其与网格一起使用。

body { 
    background-image: url('https://i.imgur.com/sWfZ8nq.png');
    background-repeat: repeat;
    margin: 0;
}

.fg {
    display: grid;
    grid-template-rows: 1fr auto;
    margin: auto;
    height: 100vh;
}

.fg div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.fg span {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 10vmin;
    letter-spacing: 3px;
    text-shadow:  2px  2px 2px green,
                  2px -2px 2px green,
                 -2px  2px 2px green,
                 -2px -2px 2px green;
}

.fg img {
	position: relative;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	max-height: 70vh;
	max-width: 90vw;
}

<html>
  <head>
    <title>HNY</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="fg">
      <div>
        <span>Happy new year!</span>
      </div>
      <img src="https://i.imgur.com/Ql8A585.png"/>
    </div>
  </body>
</html>

【讨论】：

完美适用于此处的任何分辨率。
有没有机会让 ie 兼容？ :)

【解决方案2】：

我也把.fg 做成了一个弹性盒子，这样就不需要绝对定位图像了。我将图像包装在一个 div 中，以便在 div 由于flex-grow: 1;

而放大时，它可以在保持其纵横比的同时进行缩放

body { 
    margin: 0;
    background-image: url('https://i.imgur.com/sWfZ8nq.png');
    background-repeat: repeat;
    font-size: 0;
}

* {
    box-sizing: border-box;
}

.fg {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.fg .text {
    display: flex;
    align-items: center;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}

.fg span {
    color: white;
    font-size: 10vmin;
    letter-spacing: 3px;
    text-shadow:  2px  2px 2px green,
                  2px -2px 2px green,
                 -2px  2px 2px green,
                 -2px -2px 2px green;
}

.fg .img {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    max-height: 70%;
    max-width: 90%;
}

@media (orientation: landscape) {
    img {
        height: 100%;
    }
}

@media (orientation: portrait) {
    img {
        width: 100%;
    }
}

<html>
  <head>
    <title>HNY</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="fg">
      <div class="text">
        <span>Happy new year!</span>
      </div>
      <div class="img">
          <img src="https://i.imgur.com/Ql8A585.png" />
      </div>
    </div>
  </body>
</html>

【讨论】：

很遗憾，您的解决方案不能满足我的要求，即上框没有填满垂直空间i.imgur.com/6AJRRcw.png
糟糕，忘记删除max-height: 30%; 我会更新它。
现在图片和文字重叠了:)
我注意到...我要再看看这个。看看我能不能弄清楚到底发生了什么。
好吧@DannyLo 我很肯定这个工作，滚动条是由于它在 iframe 中，在 Chrome 本地打开它，没有问题。