Flexbox和令人讨厌的滚动条

时间：2018-03-01 22:09:13

标签： css responsive-design flexbox

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

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

这显然很难看。 enter image description here

但这也很难看。 enter image description here


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

BTW：在第一个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>

2 个答案:

答案 0 :(得分：0)

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

示例：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尽管我喜欢flexbox，但不确定我会不会喜欢这样的东西，考虑到导航需要一个固定的行为，内容将显示在一个居中的框中，这里是我＆＃39 ; d做到了：

＆＃13;
＆＃13; 
*,
*::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%;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题