1

I'm trying to build a (responsive) website using flexbox. The text-boxes in the have to be fixed and are basically the navigation. The only moving part of the site is the text in the center that scrolls vertically and flows over the viewport height.

I essentially want to give the illusion that the text-boxes are floating in a fixed position above the content of the page.

This is obviously ugly. enter image description here

But this is also ugly. enter image description here


I want a scrollbar that doesn't stop at the text-boxes like on the picture above but don't now if that's even possible … How could I write that?

BTW: On the first img the flex-direction is simply set to row and on the second to column – as you may already have guessed.

This is what I want to achieve: enter image description here

Here the code of the second img.

EDIT: I solved it by simply wrapping the text-boxes inside a fixed parent element. This post helped me and has a good example: 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>
Unknown User
  • 505
  • 1
  • 7
  • 19
  • "I want a scrollbar that doesn't stop at the text-boxes" - Do you want the textboxes stacked on top of the scrollbar? Use `position: absolute`? – sol Mar 01 '18 at 22:17
  • When I do that the text-boxes "collapse" and are all in the top left corner – Unknown User Mar 01 '18 at 22:19
  • 1
    Could you post an image of the desired layout? – sol Mar 01 '18 at 22:21
  • 2
    Why the *illusion* of being fixed...wouldn't using `position:fixed` be the answer? – Paulie_D Mar 01 '18 at 22:28
  • Display:flex and position:fixed does not go well together. https://stackoverflow.com/questions/29036231/how-can-i-have-a-position-fixed-behaviour-for-a-flexbox-sized-element – Unknown User Mar 01 '18 at 22:40
  • You possibly won't need `display: flex` if all you have is a block of text. – sol Mar 01 '18 at 22:43

2 Answers2

0

You can try using position: fixed for the navigation.

Example:

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>
sol
  • 22,311
  • 6
  • 42
  • 59
0

As much as I love flexbox, not sure I would go with it for something like this, considering the navigation would need a fixed behavior and the content would be displayed in a centered box, here's how I'd do it: 

*,
*::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>
Syden
  • 8,425
  • 5
  • 26
  • 45
  • Thanks for your answer Syden! It helped me even though I used another solution. As I am seeing you didn't use flexbox at all. Long time since I did HTML/CSS and I am wondering how why the page-content in your example resizes according to the window? What makes your example "responsive" even though u don't use flexbox? – Unknown User Mar 02 '18 at 19:10
  • It's because of the media query used below the comment `/* mobile responsive */` in the CSS bottom. Flexbox is amazing, but for this case main behavior was achieved with `position: fixed;` on the navs, you could still use flex for the center content but it's resizing would still be impacted by the navs on the sides so I opted for the conventional way with a bit of media query work, there is no right or wrong :), whatever is beneficial to your project works! thanks and regards. – Syden Mar 02 '18 at 19:28