Flexbox 和烦人的滚动条答案

【问题标题】：Flexbox and the annoying scrollbarFlexbox 和烦人的滚动条
【发布时间】：2018-08-10 02:22:26
【问题描述】：

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

我本质上是想给出文本框浮动在页面内容上方的固定位置的错觉。

这显然很难看。

但这也很丑。

我想要一个滚动条，它不会像上图那样停在文本框上，但如果可能的话，现在不要……我怎么写？

顺便说一句：在第一个 img 中，flex-direction 被简单地设置为行，而在第二个中，flex-direction 被设置为列——正如您可能已经猜到的那样。

这就是我想要实现的目标：

这里是第二个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>

【问题讨论】：

"我想要一个不停留在文本框上的滚动条" - 你希望文本框堆叠在滚动条的顶部吗？使用position: absolute?
当我这样做时，文本框“折叠”并且都在左上角
您能张贴所需布局的图片吗？
为什么被修复的错觉...不会使用position:fixed作为答案？
Display:flex 和 position:fixed 不能很好地结合在一起。 stackoverflow.com/questions/29036231/…

标签： css responsive-design flexbox

【解决方案1】：

尽管我很喜欢 flexbox，但我不确定我是否会使用它，考虑到导航需要一个固定的行为并且内容将显示在一个居中的框中，我会这样做：

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-family: Avenir;
  text-decoration: none;
  color: black;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.mainContent {
  padding: 50px 20%;
}

.topLeft,
.topRight,
.bottomLeft,
.bottomRight {
  position: absolute;
  padding: 10px 25px;
  background: lightgray;
  font-size: 24px;
}

.topLeft {
  top: 0;
  left: 0;
}

.topRight {
  top: 0;
  right: 10px;
}

.bottomLeft {
  bottom: 0;
  left: 0;
}

.bottomRight {
  bottom: 0;
  right: 10px;
}

.intro-text {
  margin: 5% 5% 5% 0;
  font-size: 54px;
  line-height: 104px;
}

/* mobile responsive */

@media (max-width: 768px) {
  .topLeft,
  .topRight,
  .bottomLeft,
  .bottomRight {
    padding: 5px 25px;
    background: lightgray;
    font-size: 18px;
  }
  .mainContent {
    padding: 50px 25%;
  }
}

<nav>
  <a href="" class="topLeft">Text</a>
  <a href="" class="topRight">Text</a>
  <a href="" class="bottomLeft">Text</a>
  <a href="" class="bottomRight">Text</a>
</nav>
<div class="mainContent">
  <h1 class="intro-text">header</h1>
  <div class="FirstContent-container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium consectetur, consequatur ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Tempora qui, porro culpa. Repudiandae aut dolorum, mollitia, minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea
    rem laboriosam aliquid accusamus perspiciatis eius, debitis quod soluta. Ipsum dolores velit et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium consectetur, consequatur
    ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora qui, porro culpa. Repudiandae aut dolorum, mollitia,
    minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea rem laboriosam aliquid accusamus perspiciatis eius, debitis quod soluta. Ipsum dolores velit
    et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium consectetur, consequatur ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum
    doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora qui, porro culpa. Repudiandae aut dolorum, mollitia, minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea rem laboriosam aliquid accusamus perspiciatis eius, debitis quod soluta. Ipsum dolores velit et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Laudantium consectetur, consequatur ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
    qui, porro culpa. Repudiandae aut dolorum, mollitia, minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea rem laboriosam aliquid accusamus perspiciatis
    eius, debitis quod soluta. Ipsum dolores velit et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!
  </div>
</div>

【讨论】：

感谢您的回答赛登！即使我使用了另一种解决方案，它也对我有所帮助。正如我所看到的，您根本没有使用 flexbox。自从我做了 HTML/CSS 很久以来，我想知道为什么您的示例中的页面内容如何根据窗口调整大小？即使您不使用 flexbox，是什么让您的示例“响应式”？
这是因为在 CSS 底部的评论 /* mobile responsive */ 下方使用了媒体查询。 Flexbox 很棒，但在这种情况下，主要行为是通过导航上的position: fixed; 实现的，您仍然可以将 flex 用于中心内容，但它的大小调整仍会受到两侧导航的影响，所以我选择了传统方式一点媒体查询工作，没有对错:)，凡是对你的项目有利的工作！谢谢和问候。

【解决方案2】：

您可以尝试使用position: fixed 进行导航。

例子：

body {
  margin: 0;
  font-family: Avenir;
  overflow: hidden;
  height: 100vh;
}

section {
  height: 100%;
  overflow: auto;
}

.content {
  width: 66%;
  margin: 0 auto;
}

nav {
  position: fixed;
  width: calc(100% - 10px);
  display: flex;
  justify-content: space-between;
}

nav.top {
  top: 0;
}

nav.bottom {
  bottom: 0;
}

nav a {
  text-decoration: none;
  font-size: 1.5rem;
  padding: 1rem;
  background: lightblue;
}

<section>
  <nav class="top">
    <a href=""> text </a>
    <a href=""> text </a>
  </nav>
  <div class="content">
    <h1 class="intro-text"> header </h1>
    <p>
      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.
      
       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.
       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. 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. 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. 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. 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. 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.
       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.
    </p>
  </div>
  <nav class="bottom">
    <a href=""> text </a>
    <a href=""> text </a>
  </nav>
</section>

【讨论】：