wordpress footer置底

最新推荐文章于 2023-10-19 12:25:30 发布

james_laughing

最新推荐文章于 2023-10-19 12:25:30 发布

阅读量1k

点赞数

分类专栏： wordpress

wordpress 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

/* 通过calc()函数让内容区块自动伸缩 */
.my-body{
	min-height: calc(71.7vh - 80px);
}
footer{
	height:50px;
}

参考：https://www.jianshu.com/p/6efe2c76a2dd

当我们要设置网页中的footer置底（sticky footer），我们可以这样办

body元素内的结构代码如下

<body>
  <div class="main">
    <ul>
        <li>啦啦啦啦</li>
        <li>啦啦啦啦</li>
        <li>啦啦啦啦</li>
    </ul>
  </div>
  <footer>
    <ul>
      <li>联系电话</li>
      <li>请拨打111</li>
    </ul>
  </footer>
</body>

方式一:

<style>
       footer{
           position:absolute;
           bottom:0;
       }
</style>

但是当我们的内容区块过多超过一屏时,就会出现footer不会随着内容往后移(不再置底)的问题

接下来的两种方式就能解决当内容过多时,footer永远都置底

方式二：使用calc()设置内容高度

<style>
    *{
      margin:0;
      padding:0;
    }
    
    /* 通过calc()函数让内容区块自动伸缩 */
    .main{
        min-height: calc(100vh - 80px);
    }
    footer{
        height:50px;
    }
</style>

上面的80px=30px+50px，是因为假设内容区块和footer的间距为30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句话，我们就可以计算出内容区块的自动伸缩高度，从而让footer置底

注意,calc()使用加减法时要当心，记得在+,-号的前后加一个空格。这样做的原因是在未来我们在calc()函数内部可能会用到关键字,为了到时候能区别开-是关键字的连字符还是运算符减号

方式三：使用Flexbox弹性盒子布局

<style>
    *{
      margin:0;
      padding:0;
    }
    footer ul{
      list-style-type: none;
    }

    /*Flexbox弹性盒子，灵活解决*/
    body{
      display:flex;
      flex-flow:column;
      min-height:100vh;//100%;
    }
    .main{
      flex:1;
    }
</style>

其中，把flex设置为一个大于0的值，比如flex:1，实现了内容区块自动伸展并占满所有的可用空间
注意，响应式网页设计时，

vh,vw跟着显示窗口（视图）的宽度或高度，而不是父元素的宽度或高度
vw:viewport width，1vw相当于显示窗口宽度的1%
vh:viewport height，1vh相当于显示窗口高度的1%
兼容性：IE9+，chrome/firefox/safari/opera支持，[iOS]safari 8+支持，[Androidbrowser4.4+支持，chrome for android39支持

利用Flexbox弹性盒子布局，仅用四行代码，就实现了footer置底

作者：鱼娟note
链接：https://www.jianshu.com/p/6efe2c76a2dd
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

james_laughing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
wordpress footer置底

/* 通过calc()函数让内容区块自动伸缩 */.my-body{ min-height: calc(71.7vh - 80px);}footer{ height:50px;}参考：https://www.jianshu.com/p/6efe2c76a2dd当我们要设置网页中的footer置底（sticky footer），我们可以这样办body元素内的结构代码...
复制链接

扫一扫