How to let one of two vertical elements' height depend on another?

问题

I am working on a Christmas gift website and have just two elements on it, which I want to have like this:

The bottom element is an image, which should be aligned to the bottom of the viewport. It should be resized proportionally and take maximum 90% of the viewport width and maximum 70% of the viewport height. The upper element is a text element and I want it to fill the remaining vertical space and align that text to the center horizontally and vertically.

In the case, if the bottom element takes 70vh, the solution is easy, the upper element should take 30vh. But If the bottom element is smaller, the height of the upper box should be (view port height - upper element height).

This is what I have so far.

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>

That works fine for bottom element height = 70vh, for example for resolution 1920 x 1080. But if I flip it, i.e. switch to 1080 x 1920, the upper box takes only 30vh, but i want it to fill the space. Any suggestions?

回答1:

I used grid css for this. I set .fg to 100vh and the body margin to 0 to avoid the overflow problem. Because you needed the upper to repond to the img size, I set the grid rows to: grid-template-rows: 1fr auto;, meaning the top half of the grid takes the remaining space. Also changed the image position to relative to get it working with grid.

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>

回答2:

I made .fg a flexbox as well, which got rid of the need to absolutely position the image. I wrapped the image in a div so that it scales while preserving it's aspect ratio, when the div enlarges due to 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>

来源：https://stackoverflow.com/questions/53866359/how-to-let-one-of-two-vertical-elements-height-depend-on-another

标签

html

css

responsive-design