大螃嗨

好记性不如烂笔头

用户工具

站点工具


页面布局

footer在内容高度不足时也紧贴底部

      <div className={styles.content}>
        <div className={styles.head}>
          <div className={styles.logo}>{enterpriseName}</div>
        </div>
        <div className={styles.body}>
          <div className={styles.section}>页面Section</div>
          {jobList &&
            jobList.map((job) => {
              return this.renderCard(job);
            })}
          <div className={styles.footerMargin}></div>
          <div className={styles.footer}>
            XX科技版权所有 copyright ©️ xxxx.com | 京ICP备12345678号-1
          </div>
        </div>
      </div>
.content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  background: rgba(249, 250, 249, 1);
}
.head {
  width: 100%;
  height: 61px;
  min-height: 61px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.02);
}
.body {
  width: 100%;
  position: relative;
  flex: 1 1 auto;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.footerMargin {
  flex: 1 1 auto;
}
.footer {
  width: 100%;
  height: 61px;
  max-height: 61px;
  min-height: 61px;
  height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(195, 195, 195, 1);
  background: rgba(255, 255, 255, 1);
  line-height: 17px;
  margin-top: 30px;
}
页面布局.txt · 最后更改: 2020/08/07 03:27 由 螃蟹