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

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 实现此目的（解决方案可能包括网格、flexbox），或者我运气不好，应该寻求 JS 解决方案？

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

提前致谢！

Answer 1

根据您的解释，您希望 class: "end-of-body-block" 动态定位在正文和页脚之间。

基本思路是使用 position: absolute; 从正常流程中删除红色框，但这样做会失去基本的位置结构。所以我们用父 position: relative; 修复它。这是 classic move.

为此，我在 .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 可以帮到我。

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

Forcing other element's content to be moved by the same vertical amount

html

javascript

css

layout

frontend

编辑