css布局之版权信息

最新推荐文章于 2023-04-06 21:24:37 发布

Love_vermouth

最新推荐文章于 2023-04-06 21:24:37 发布

阅读量3.6k

点赞数

分类专栏： css 文章标签： css vh calc

本文链接：https://blog.csdn.net/u010238381/article/details/81253023

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

要实现这样一个功能：

版权信息永远位于main页面的底部，当main页面内容不满屏时，footer部分依旧处于视窗的下方。

<div class="main">
    <div class="inner">
        <div class="main-content">
            主要内容
        <div>
        <footer>版权信息<footer>
    </div>
<div>

.inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //height: calc(~"100vh - 100px"); // less的写法
    height: calc(100vh - 100px);  // css的写法
    // 100px是头部的高度，视情况修改
}

如果有更好的实现方式，欢迎留言~