Flexbox和令人讨厌的滚动条

问题描述 投票：1回答：2

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

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

这显然是丑陋的。 enter image description here

但这也很难看。 enter image description here

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

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

这就是我想要达到的目标：enter image description here

这里是第二个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>
css responsive-design flexbox
2个回答
0
投票

尽管我喜欢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>
0
投票

您可以尝试使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.