Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Responsive Design

How To Let One Of Two Vertical Elements' Height Depend On Another?

Post a Comment
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

Solution 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>

Post a Comment for "How To Let One Of Two Vertical Elements' Height Depend On Another?"