Flexbox和令人讨厌的滚动条

Question

我正在尝试使用flexbox构建一个（响应式）网站。必须修复的文本框基本上是导航。该站点唯一的移动部分是中心的文本，它垂直滚动并流过视口高度。

我基本上想要给出一个错觉，即文本框浮动在页面内容之上的固定位置。

这显然是丑陋的。

但这也很难看。

我想要一个滚动条不会停留在上面的图片上的文本框中，但如果可能的话，现在不要这样做......我怎么能写出来？

顺便说一句：在第一个img上，flex-direction只是设置为row而第二个就是列 - 正如你可能已经猜到的那样。

这就是我想要达到的目标：

这里是第二个img的代码。

编辑：我通过简单地将文本框包装在固定的父元素内来解决它。这篇文章帮助了我，并有一个很好的例子：How can I have a position: fixed; behaviour for a flexbox sized element?

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  margin: 0;
  font-family: Avenir;
  overflow: hidden;
}

a:visited {
  color: black;
}

nav {
  list-style-type: none;

}

.top a,
.bottom a {
  margin: 1em;
}

.content {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.intro-container {
  margin: 5%;
}

.intro-text {
  font-size: 54px;
  line-height: 52px;
}


.FirstContent-container {
  display: flex;
  margin: 1em;
}




@media screen and (min-width: 68px) {

  nav {
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
  }

  nav a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: 1.5em;
  }

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> </title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>


    <nav class="top">
        <a href=""> text </a>
        <a href=""> text </a>
    </nav>

    <div class="content">
          <div class="intro-container">
            <h1 class="intro-text"> header </h1>
          </div>

          <div class="FirstContent-container">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
    </div>


    <nav class="bottom">
        <a href=""> Text </a>
        <a href=""> Text </a>
    </nav>





  </body>
</html>

Answer 1

另一答案