设置footer位置：让页面footer在正文内容不够是置于屏幕底部，当正文内容超过屏幕高度时置于正文底部

最新推荐文章于 2022-04-05 22:13:13 发布

奔跑的Camille

最新推荐文章于 2022-04-05 22:13:13 发布

阅读量1.6k

点赞数

分类专栏： CSS Vue 文章标签： css html html5 vue.js

本文链接：https://blog.csdn.net/ZXT149074136/article/details/104815459

版权

Vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

本文详细介绍如何使用Flex布局确保网页Footer在内容不足时置于底部，内容过多时紧随正文之后。通过设置div的display属性为flex，并调整flex-direction、flex-grow等属性，实现响应式设计。

摘要由CSDN通过智能技术生成

让页面footer在正文内容不够是置于屏幕底部，当正文内容超过屏幕高度时置于正文底部

//html布局
<template>
  <div class="page-container">
      <header-nav></header-nav>
        <router-view class="main-layout"></router-view>
        <footer-nav></footer-nav>
      
  </div>
</template>

启用 flex模式，我们将class="page-container"的div的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）

.page-container {
  padding: 0;
  width: 100%;
  min-height:100%;
  height: 100%;
  margin: 0;
  display: flex;//启用flex
  flex-direction: column;//设置为列
}

最后设置header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域

flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率
flex-shrink：如果空间不足，元素的收缩比率
flex-basis：元素的伸缩基准值

//header部分css
.header{
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height:80px;
  z-index: 9999;
  background: darkslateblue;
  /* header 采用固定的高度，只占用必须的空间 */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

//主体部分css
.main-layout {
  margin-top: 80px;
  width: 100%;
  /* 将 flex-grow 设置为1，该元素会占用所有的可使用空间而其他元素该属性值为0，因此不会得到多余的空间*/
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

//footer部分css
.footer{
  text-align: center; 
  width:100%;
  height: 60px;
  line-height: 60px;
  clear: both;
  background:rgb(61, 60, 60);
  color: white;
  /* 和 header 一样，footer 也采用固定高度*/
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

踩了很多坑，总结一下，记录！