CODEWITHSUNDEEP
htmlcssflexbox
Unknown User
Unknown User

Reputation: 525

Flexbox struggles

I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position my footer at the bottom of the viewport.

enter image description here

Nothing crazy actually but I don't understand what I am doing wrong?

body {
  font-family: DejaVu Sans Mono;
  min-height: 100vh;
}

nav a {
  margin: 0;
  padding: 0;
  display: block;
  text-decoration: none;
  text-align: center;
}

nav ul {
  list-style-type: none;
}

.intro-container {
  display: flex;
}

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

.placeholder {
  width: 500px;
  height: 800px;
  position: absolute;
  left: 65vw;
  top: 85vh;
  background-color: lightgrey;
}



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

  .top ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }

  .bottom ul {
    margin: 0;
    padding: 0;
    top: 100vh;
    display: flex;
    justify-content: space-between;
  }

  nav {
  }


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


<nav class="top">
  <ul>
    <li> <a href="index.html"> text1 </a> </li>
    <li> <a href=""> text2 </a> </li>
  </ul>
</nav>

<div class="intro-container">
  <h1 class="intro-text">
    Lorem Ipsum 
  </h1>
</div>

<nav class="bottom">
  <ul>
    <li> <a href=""> text3 </a> </li>
    <li> <a href=""> text4 </a> </li>
  </ul>
</nav>



  </body>
</html>

Upvotes: 0

Views: 72

Answers (2)

Colin Young
Colin Young

Reputation: 3058

Basically you need to create a layout with a left, middle and right column using flex (.container in the snippet), and use flex to layout the ul in the left and right column.

I added a fixed height on the div.container to demonstrate. In your real use you will need to set body and div.container to 100%. The snippet display here causes issues demonstrating that. I also added borders to show the layout of the main columns.

body {
  font-family: DejaVu Sans Mono;
}

div.container {
  display: flex;
  height: 300px;
}
div.container > * {
  border: 1px solid black;
}
nav {
  display: flex;
}
nav a {
  margin: 0;
  padding: 0;
  display: block;
  text-decoration: none;
  text-align: center;
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.intro-container {
  max-height: 100%;
  overflow-y: auto;
}

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

.placeholder {
  width: 500px;
  height: 800px;
  position: absolute;
  left: 65vw;
  top: 85vh;
  background-color: lightgrey;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<div class="container">
<nav class="left">
  <ul>
    <li> <a href="index.html"> text1 </a> </li>
    <li> <a href=""> text3 </a> </li>
  </ul>
</nav>

<div class="intro-container">
  <h1 class="intro-text">
    Lorem Ipsum 
  </h1>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
</div>

<nav class="right">
  <ul>
    <li> <a href=""> text2 </a> </li>
    <li> <a href=""> text4 </a> </li>
  </ul>
</nav>
</div>
  </body>
</html>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371979

Use flex properties to pin the anchors to all four corners.

Then use overflow: auto to make the content scrollable.

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* pin header and footer to top and bottom edges */
  height: 100vh;
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-between;  /* pin anchors to left and right edges */
}

nav a {
  font-size: 1.5em;
  background-color: lightgreen;
  text-decoration: none;
}

.intro-container {
  flex: 1;
  background-color: yellow;
  overflow: auto;
}
<nav class="top">
  <a href="index.html"> text1 </a>
  <a href=""> text2 </a>
</nav>

<div class="intro-container">
  <h1 class="intro-text">
    Lorem Ipsum
  </h1>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
  <p>I'm struggling to create a fixed header and footer using flexbox. Header and footer actually consists just of an element on each side. I'd like to make the elements fixed and the content in the middle scrollable. I also don't get it how to position
    my footer at the bottom of the viewport.</p>
</div>

<nav class="bottom">
  <a href=""> text3 </a>
  <a href=""> text4 </a>
</nav>

jsFiddle demo

Upvotes: 1

Related Questions