强制其他元素的内容移动相同的垂直量

Question

我偶然发现了一个前端问题，我无法弄清楚最好的方法是什么。 我需要实现的简化布局可以看这里：https://jsfiddle.net/kw56sa84/

content-block {
  min-height: 100px;
  background: #aaa;
  border: 1px solid;
}

.end-of-body-block {
  width: 50%;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #a00;
  position: relative;
  transform: translateY(50%);
  text-shadow: 0 0 2px #fff;
  background: rgba(250, 180, 180, 0.9)
}

.footer {
  min-height: 300px;
  background: #0A152B;
  color: #fff;
}

<div class="wrapper">
  <div class="content">
    <div class="content-block">Some content</div>
    <div class="content-block">Some content</div>

    <div class="end-of-body-block">
      Some text here that can have into a dynamic height, and responsively height increases.
    </div>
  </div>
  <div class="footer">
    Links and other information that should be visible
  </div>
</div>

基本上我所拥有的是内容和页脚，并且有一个块应该在正文中占 50%，在页脚中占 50%，并且两个元素内容都通过连接元素的动态半高移动。在 jsfiddle 示例中，页脚内容应该有某种填充。所有元素的高度都是动态的。

我想这里的主要问题是 - 是否可以使用 CSS 来实现这一点（解决方案可能包括网格、弹性框），还是我运气不好，应该寻求 JS 解决方案？

EDIT 在这里您可以看到应该实现的简化设计：

提前致谢！

Answer 1

根据您的说明，您希望该类：“end-of-body-block”动态定位在正文和页脚之间。

基本思想是使用position: absolute;从正常流程中删除红色框，但这样做会失去基本位置结构。因此，我们使用position: relative; 与父级一起修复它。这是经典的动作。

为此，我在 .content 中添加了position:relative;：

.content{
  position:relative;
}

然后我将你的红色块绝对定位如下：

.end-of-body-block{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

编辑

JS 为内容和页脚添加动态填充。

演示：

var heightRed = document.getElementsByClassName('end-of-body-block')[0].offsetHeight;
heightRed = (heightRed / 2) + 2 + 'px';

var content = document.getElementsByClassName('content')[0]
var footer = document.getElementsByClassName('footer')[0]

content.style.paddingBottom = heightRed;
footer.style.paddingTop = heightRed;

.content{
  position:relative;
}
.content-block {
  min-height: 100px;
  background: #aaa;
  border: 1px solid;
}

.end-of-body-block {
  width: 50%;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #a00;
  /*position: relative;
  transform: translateY(50%);*/
  text-shadow: 0 0 2px #fff;
  background: rgba(250, 180, 180, 0.9);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.footer {
  min-height: 300px;
  background: #0A152B;
  color: #fff;
}

<div class="wrapper">
  <div class="content">
    <div class="content-block">Some content</div>
    <div class="content-block">Some content</div>

    <div class="end-of-body-block">
      Some text here that can have into a dynamic height, and responsively height increases.
    </div>
  </div>
  <div class="footer">
    Links and other information that should be visible
  </div>
</div>

Answer 2

经过几个小时的反复试验，我想出了如何解决这个问题的想法。这是一个真正的 hacky 解决方案，但在我的情况下它确实有效，也许其他人会发现它很有用。

所以在我的例子中，页脚有一个图像背景，因此很难想到这一点。这里的解决方案可能是模拟与您的元素不存在的其他部分相同的背景。

详细说明，不要试图移动其他元素的内容，而是让它看起来这样做。我将红色框移到了页脚，所以它占据了它需要的整个高度。然后将一个伪（之前）元素作为绝对元素添加到红色框的父级，并使其全宽和高度的 50%。参见这里例如https://jsfiddle.net/co35svtd/4/

.content {
  position: relative;
  z-index: 0;
  width: 100%;
  display: inline-block;
}

.wrapper {
  background: #eee;
}

.content-block {
  min-height: 100px;
  background: #aaa;
  border: 1px solid;
}


.footer-block-wrapper {
  position: relative;
}

.end-of-body-block {
  width: 50%;
  margin: 0 auto 0;
  padding: 30px;
  border: 1px solid #a00;
  text-shadow: 0 0 2px #fff;
  background: rgba(250, 180, 180, 0.9);
  box-sizing: border-box;
  z-index: 10;
}

.end-of-body-block:before {
  content: '';
  z-index: -1;
  position: absolute;
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
}

.footer {
    min-height: 300px;
    background: #0A152B;
    color: #fff;
    position: relative;
    z-index: 100;
}

<div class="wrapper">
  <div class="content">
    <div class="content-block">Some content</div>
    <div class="content-block">Some content</div>
   
  </div>
  <div class="footer">
  <div class="footer-block-wrapper">
    <div class="end-of-body-block">
        Some text here that can have into a dynamic height, and responsively height increases.
      </div>
  </div>
      
    Links and other information that should be visible
  </div>
</div>

我知道这不是我要寻找的答案，但这个 hack 对我有用。