Question

我正在努力使用flexbox创建一个固定的页眉和页脚。页眉和页脚实际上只包含每一侧的元素。我想使元素固定，中间的内容可滚动。我也不知道如何将我的页脚放在视口的底部。

实际上没什么可疯的，但我不明白我做错了什么？

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>

Answer 1

使用flex属性将锚固定到所有四个角。

然后使用overflow: auto使内容可滚动。

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

Answer 2

基本上，您需要使用flex（.container在代码段中创建一个包含左，中，右列的布局，并使用flex在左右列中布置ul。 / p>

我在div.container上添加了一个固定的高度来演示。在您的实际使用中，您需要将body和div.container设置为100％。此处的代码段显示会导致出现问题。我还添加了边框来显示主列的布局。

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>

Flexbox挣扎

2 个答案:

jsFiddle demo