文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox挣扎

问Flexbox挣扎
EN

Stack Overflow用户

提问于 2018-02-18 19:58:32

回答 2查看 55关注 0票数 0

我正在努力创建一个固定的页眉和页脚使用柔性盒。页眉和页脚实际上仅由两边的一个元素组成。我想要使元素固定和内容在中间滚动。我也不知道如何定位我的脚在底部的视口。

其实没什么疯狂的，但我不明白我做错了什么？

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>

flexbox

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-18 20:10:38

使用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演示

票数 1

Stack Overflow用户

发布于 2018-02-18 20:11:12

基本上，您需要使用flex (代码片段中的.container)创建一个具有左、中和右列的布局，并使用flex在左和右列中布局ul。

我在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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48855971

复制

相似问题

问Flexbox挣扎
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox挣扎EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox挣扎
EN