Vertical sliding layout

by Alexander Terehov

HTML

<section id="top-placeholder"> </section>
<section id="quote">
  <div id="quote-content">
    Quote
    <details id="collapsible">
      <summary>click to open</summary>
      <p>Lot</p>
      <p>of</p>
      <p>new</p>
      <p>content</p>
    </details>
  </div>
</section>
<section id="comment">
  <div id="comment-content">Comment</div>
</section>
<section id="fl-1">Fixed link</section>
<section id="fl-2">Fixed link</section>

CSS

html, body {
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#top-placeholder {
  background-color: #CCFF99;
  height: 20%;  
}

#quote {
  background-color: #CCFF99;
  min-height: calc(100% - 40% - 20%);
  /* height: calc(100% - 40%); /**/
  
  display: flex;
  justify-content: center;
}

#quote-content {
  align-self: top;
}

#comment {
  background-color: #FFCCCC;
  height: calc(100% - 60% - 3em);
  
  display: flex;
  justify-content: center;
}

#comment-content {
  align-self: center;
}

#fl-1 {
  background-color: #99CCFF;
  height: 1.5em;
}

#fl-2 {
  background-color: #CC99CC;
  height: 1.5em;
}