Search code examples
htmlcsspositionheight

Wanting height of two objects to match in spite of expanding content

I have a page that has three main section:

  • project-arrow-box
  • white-green
  • light-gray

project-arrow-box and light-gray are on the left side of the page and white-green is on the right. I am wanting light-gray and white-green's bottom to meet at the same point and touch my footer. My white-green's section will change size based if validation errors are made or whatever the case may be. On different screen sizes these two divs (light-gray and white-green) very in placement. Sometimes light-gray surpasses white-green and vise versa. Again, I want the end/bottom of those two divs to touch my footer regardless of the screen size.

I have tried adding bottom: 0; to both of light-gray and white-green, but this did not help. I have white-green's height set to auto, so it adapts to the expanding nature of this div. This happened before the footer, so the footer has nothing to do with any of these issues.

What can I do so this becomes possible?

enter image description here

.project_arrow_box {
  position: relative;
  /*background: rgb(69,186,149);*/
  background: #00a16d;
  border: 4px solid #00a16d;
  width: 33%;
  height: 800px;
  z-index: 99;
}

#project-content-wrap {
  margin: 30% 13%;
}

.white-green {
  background-color: rgb(241, 250, 247);
  width: 66.56%;
  height: auto;
  z-index: 55;
  margin-left: 33.4%;
  margin-right: 0;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}

#white-green-section {
  position: relative;
  left: 30%;
  text-align: center;
  opacity: 0;
}

.light-gray {
  background-color: #E0E0E0;
  width: 33.5%;
  padding-top: 150px;
  bottom: 0;
  margin-bottom: 0;
}

.light-gray-container {
  left: 15%;
  position: relative;
  width: 80%;
  height: auto;
  padding-bottom: 40px;
}
<div class="project_arrow_box">
  <div id="project-content-wrap">
  </div>
</div>
<div class="white-green">
    <div id="white-green-section">
    </div>
</div>
<div class="light-gray">
    <div class="light-gray-container">
    </div>
</div>

Solution

  • You can do this with Flexbox

    body, html {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 0 0 33%;
}

.one {
  background: #A1EB88;
  flex: 100vh;
}

.two {
  flex: 100vh;
  background: #F2BB7C;
}

.three {
  background: lightblue;
  flex: 1;
}

footer {
  height: 50px;
  background: red;
  width: 100%;
}
    <div class="container">
  <div class="left">
    <div class="one">One</div>
    <div class="two">Two</div>
  </div>
  <div class="three">Three</div>
</div>
<footer>Footer</footer>