css 中 Sticky footers (让页脚紧贴页面底部的方法)

最新推荐文章于 2021-08-04 07:52:20 发布

原创最新推荐文章于 2021-08-04 07:52:20 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

知识专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用三层嵌套实现特定网页布局的方法，包括如何通过设置外层容器的最小高度、中间层的内容区域及其内边距，以及底部元素的定位来确保整体布局效果。文中还详细解释了如何利用CSS的clearfix技术来清除浮动，避免布局错乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要三个层一个层包内容一个内容一个层底部

<div class="detail-wrapper clearfix" >   注意要清除浮动
  <div class="detail-main"></div>
</div>
<div class="detail-close">
  <i class="icon-close"></i>
</div>

.detail .detail-wrapper {
  min-height: 100%;
}
.detail .detail-wrapper .detail-main {
  margin-top: 64px;
  padding-bottom: 64px;            //不会覆盖底部,给底部留空间
}
.detail .detail-close {
  position: relative;
  width: 32px;
  height: 32px;
  margin: -64px auto 0 auto;
  clear: both;
  font-size: 32px;
}

清除浮动

.clearfix {
  display: inline-block;
}
.clearfix:after {
  display: block;
  content: "";
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}