CSS Sticky footers 布局设计

最新推荐文章于 2020-10-23 12:52:13 发布

PrincessofUtopia

最新推荐文章于 2020-10-23 12:52:13 发布

阅读量450

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CodeIdears 文章标签： css 布局设计

本文链接：https://blog.youkuaiyun.com/niuchaoying/article/details/77532471

CodeIdears 专栏收录该内容

2 篇文章

订阅专栏

在网页设计中，我们经常遇到的布局场景：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。如下图：

sticky footer 布局简易图

需求描述：无论A容器中的内容如何增长，X都会紧紧粘贴在A模块的底部。

以下是在实际运用中，我所使用的一种比较简单易懂的code方式。

<body>
    <div class="content-wrapper clearfix">
        <div class="content-main">
            This plugin will cause hashes to be based on the relative path of the module, generating a four character string as the module id. Suggested for use in production.
        </div>
    </div>
    <div class="close">X</div>
</body>

首先，给根元素设置样式

html, body {
  height: 100%; // **必需code**
  overflow: auto;
}

其次，给高度不固定的内容包裹器content-wrapper添加样式，
⚠️ content-wrapper容器还是清除浮动的，我们加上清除浮动样式clearfix及其伪类：

.clearfix{ // **必需code**
    display : inline-block;
}
.clearfix:after{ // **必需code**
    display: block;
    content : ".";
    height : 0;
    line-height : 0;
    clear: both;
    visibility : hidden;
}
.content-wrapper{
    min-height : 100%; // **必需code**
}

再次，我们给它的变化内容content-main添加样式

.content-main{
    margin : 64px 10px 0 10px; 
    padding-bottom : 64px; // **必需code**
}

最后，我们给粘贴块close添加样式
⚠️ close是和content-wrapper 并列的

.close{
    position : relative;
    width : 40px;
    height : 40px;
    margin : -64px auto 20px auto; 
    // **margin-top: -64px 是必需的**
    clear : both;
    font-size : 32px;
    border: 1px solid #000;
    text-align: center;
}