html - 翻译(转换)元素后的偏移空间

Question

我使用 transform: translateY(50%) 将一个元素垂直居中放置在其父元素的底部边缘。

我遇到的问题是，当元素向下平移其高度的一半时，此部分之后的任何内容都不会向下移动相同的量。当然，所有高度都是根据内容自动设置的，所以我不能只是将一些任意的边距/顶部值应用到下一部分。

如果使用 Javascript，这真的很容易，但我宁愿避免使用 Javascript 来呈现布局，以避免在内容或视口(viewport)发生变化时不得不重新计算。

这是笔:http://codepen.io/danielvdspuy/pen/KMMOMW

---

标记(Jade):

header
  .b-hero
    .b-wrapper.b-intro
      .b-welcome 
        h1.b-welcome__heading Supercharge your talent
        p.b-welcome__message We create electrifying content for editorial titles or brands, and provide cutting-edge training courses
        .b-testimonials
          p.b-testimonials__quote “Dashboard Media is the best kept secret in training. The team is always happy to tailor a course to our needs.”
          p.b-testimonials__byline 
            | Jess McAree 
            br 
            | Group Head of Editorial Learning
            br
            | Haymarket Media
  .b-section.b-wrapper
    p You can’t see me, because I’m being covered =(

---

风格(手写笔):

*
  box-sizing         border-box

body
  background-color   rgba(255,255,255,1)
  font-family        sans-serif
  color              white
  line-height        150%

h1
  margin             0 0 0.5em 0
p
  margin             0

header
  background-color   rgba(0,0,0,0.05)
  position           absolute
  top                1em
  right              1em
  bottom             1em
  left               1em

.b-hero
  background-color   rgba(0,0,0,0.1)
  height             15em

.b-wrapper
  position           relative
  height             100%
  margin             0 auto
  max-width          1000px
  display            flex
  align-items        flex-end

.b-welcome, .b-testimonials
  padding            3em

.b-welcome
  background-color   rgb(0,141,62)
  background         linear-gradient(to right,
                     rgb(0,141,62) 0%, 
                     rgb(139,197,63) 100%)
  width              100%
  padding-right      calc(35%+3em)
  transform          translateY(50%)

.b-testimonials
  background-color   rgb(30,30,30)
  width              35%
  position           absolute
  bottom             0
  right              0

---

谢谢!

Answer 1

如何使这项工作在很大程度上取决于该页面中还应该包含什么。

假设它是居中的一个和文本(当然可以包含图像、更多文本等)，可以这样做，其中第二个 div 嵌套在居中的 div 中，具有 position: absolute 将其推到底部并从那里增长。

Fiddle demo

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
body {
  font: 21px/24px Courier New;
  color: #fff;
  text-align: center;
  background-color: #0068b3;
}
.wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.hero {
  height: 50vh;
  background-color: #2f3440;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.blurb {
  background-color: rgba(254,199,0,0.85);
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  position: relative;
  z-index: 10;
}
.pad {
  padding: 20px;
}
.text {
  position: absolute;
  top: 100%;
}

<section class="hero">
  <div class="blurb wrapper pad">“But we shouldn't use our humility as an excuse for inaction. In Washington, they call this the Ownership Society, but what it really means is - you're on your own. America, now is not the time for small plans. America, we cannot turn back. The United States does not accept the legitimacy of continued Israeli settlements.” —Barack Obama

    <div class="text wrapper pad">Text in this section is now covered by above element. It needs to move down by the same amount so the spacing is correct (prior to adding padding)</div>    
  </div>
</section>