详解CSS5种方法完成Footer置底

日期:2021-01-20 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

页脚置底(Sticky footer)便是让网页页面的footer一部分自始至终在访问器对话框的底部。

当网页页面內容充足长以致超过访问器可视性高宽比时,页脚会伴随着內容被推到网页页面底部;但假如网页页面內容不足长,置底的页脚就会维持在访问器对话框底部。

方式1:将內容一部分的margin-bottom设为负数

<div class="wrapper">
    <!-- content -->
    <div class="push"></div>
</div>
<div class="footer">footer</div>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: ⑸0px; /* 等于footer的高宽比 */
}
.footer, .push {
  height: 50px;
}

1、这个方式必须器皿里有附加的占位元素(div.push)。

2、div.wrapper的margin-bottom必须和div.footer的-height值1样,留意是负height。

方式2:将页脚的margin-top设为负数

给內容外提升父元素,并让內容一部分的padding-bottom与页脚的height相同。

<div class="content">
  <div class="content-inside">
    <!-- content -->
  </div>
</div>
<div class="footer">footer</div>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: ⑸0px;
}

方式3:应用calc()设定內容高宽比

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

这里假定div.content和div.footer之间有20px的间隔,因此70px=50px+20px

方式4:应用flexbox延展性盒合理布局

以上3种方式的footer高宽比全是固定不动的,假如footer的內容太多则将会会破坏合理布局。

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

方式5:应用Grid网格合理布局

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。