时间戳

首页 > 解决方案 > CSS：使用 flexbox 创建固定页眉和页脚，同时具有动态上下文

html - CSS：使用 flexbox 创建固定页眉和页脚，同时具有动态上下文

问题描述

我正在尝试设置一个固定的页眉和固定的页脚，其中内部内容容器可以是任何大小，并且不会影响页眉/页脚的大小。我有点卡住了，不知道我是否在flex-basis这里错误地使用了.container div样式？

.container {
  display: flex;  
  flex-direction: column;
}
.container div {
  flex-basis: 50px;
}

.header {
    background: red;
}
.content {
    background: pink;
}
.footer {
    background: green;
}
<div class="container">
    <div class="header"></div>
    <div class="content"> 

    <div class="footer"></div>
</div>

标签： htmlcss

解决方案

您应该将 a 设置min-height为您的container并使用justify-content:space-between;此外，使用flex:1on.content以便它占用两者之间的可用空间:)

这是完整的代码：

.container {
  display: flex;  
  flex-direction: column;
  min-height:100vh;
  justify-content:space-between;
}
.container div {
  flex-basis: 50px;
}

.header {
    background: red;
}
.content {
    background: pink;
  flex:1;
}
.footer {
    background: green;
}
<div class="container">
    <div class="header"></div>
    <div class="content"> 

    <div class="footer"></div>
</div>

推荐阅读