html - 建立固定内容的旁白

Question

* {
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

section {
  width: 100%;  
  margin: auto;
  display: flex;
  background: gray;
}

aside,main {
  flex: 1 0 50%;
}

aside{
  flex: 0 0 50%;
  justify-content: center;
  background: #eee;

}

main {
  position: relative;
  color: white;
}


.container-text{
    position: fixed;
    margin-left: 12.5%;
    margin-right: 12.5%;
    margin-top: 24%;
    width: 25%;
}

<section>
      <aside class="aside">
        <div class="container-text">
          <header class="hello">Hello</header>
          <div class="container-nav">
            <p class="how">How</p>
            <p class="are">are</p>
            <p class="you">you</p>
          </div>
        </div>
      </aside>
      <main class="main">
          <div class="container-content">
          <h1>First heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Second heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Third heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Fourth heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
        </div>
        </main>
    </section>

我有一个布局，旁边有一个占据屏幕的一半。 aside 中的内容将在一段时间内保持不变。它存储在 container-text 容器中。我希望此容器中的所有内容都保持固定，但我希望水平和垂直居中的“hello”标题文本。 “如何”"is"“你”应该在屏幕底部，中间有空格(它们将是导航)。我设法将固定容器居中，但无法定位导航。它对左/右有响应，但对顶部/底部没有响应(我希望导航保持在底部，“你好”保持居中)。

Answer 1

这是您想要实现的目标吗？

* {
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

section {
  width: 100%;  
  margin: auto;
  display: flex;
  background: gray;
}

aside,main {
  flex: 1 0 50%;
}

aside{
  flex: 0 0 50%;
  justify-content: center;
  background: #eee;
  display:flex;
  justify-content:center;
  align-items:stretch;

}

main {
  position: relative;
  color: white;
}


.container-text{
   position: fixed;
   height: 100vh;   
   display:flex;
}

.container-text-inner {
  height:50%;
  position:relative;
  top:50%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}

.container-nav {
  display:flex;
  flex-wrap: no-wrap;
  margin-bottom:15px;
}

.container-nav p {
margin-right:15px;
}

<section>
      <aside class="aside">
        <div class="container-text">
          <div class="container-text-inner">
          <header class="hello">Hello</header>
          <div class="container-nav">
            <p class="how">How</p>
            <p class="are">are</p>
            <p class="you">you</p>
            </div>
          </div>
        </div>
      </aside>
      <main class="main">
          <div class="container-content">
          <h1>First heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Second heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Third heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Fourth heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
        </div>
        </main>
    </section>