Question

我的页面有三个主要部分：

项目箭头框
白绿色
浅灰色

project-arrow-box和light-gray位于页面左侧，white-green位于右侧。我希望light-gray和white-green的底部在同一点上相遇并触摸我的页脚。我的white-green部分将根据验证错误或任何情况更改大小。在不同的屏幕尺寸上，这两个div（light-gray和white-green）非常适合放置。有时light-gray超过white-green，反之亦然。同样，无论屏幕大小如何，我都希望这两个div的结尾/底部触及我的页脚。

我尝试将bottom: 0;添加到light-gray和white-green，但这没有用。我将white-green的高度设置为auto，因此它适应了这个div的扩展性质。这发生在页脚之前，因此页脚与这些问题无关。

我能做什么才能成为可能呢？

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

Answer 1

您可以使用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>

Answer 2

使用Flexbox可能是解决这个问题的最简单方法：

HTML：

<div class="container">
  <div class="left-container">
    <div class="project-arrow-box">
      <p>

      </p>
    </div>
    <div class="light-grey">
      <p>

      </p>
    </div>
  </div>
  <div class="white-green">
    <p>

    </p>
  </div>
</div>
<div class="footer">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, vero?
  </p>
</div>

CSS：

.container, .left-container, .white-green {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  margin: 0;
}

.left-container {
  display: -webkit-box; 
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         
  flex-direction: column;
}

.project-arrow-box {
  background-color: white;
  flex-grow: 1;
  padding: 1em;
}

.light-grey {
  background-color: #aaa;
  flex-grow: 1;
  padding: 1em;
}

.white-green {
  background-color: #ccFFcc;
  flex-grow: 1;
  padding: 1em;
}

.footer {
  background-color: #000;
  color: #fff;
}

请参阅：https://jsfiddle.net/bL2ymhps/1/

尽管扩展了内容，仍希望两个对象的高度匹配

2 个答案: