详解Sticky Footer 绝对底部的两种套路

下面是详解Sticky Footer 绝对底部的两种套路的完整攻略。

一、Sticky Footer的概念

在网页设计中,Sticky Footer指的是网页底部一直贴在视口底部,并且在网页内容过短时也不会出现在视口中的一种解决方案。此外,Sticky Footer还需要保证在网页内容过长时,能够让滚动条正常滚动,即不会被遮挡。

二、套路一:用flex实现

这种套路的主要思路是:

  • 用flex将网页中的容器撑满整个视口;
  • 将网页中的主要内容放在一个flex-grow的容器中,并撑满整个视口;
  • 将网页底部的内容放在一个高度为0的容器中,最后通过margin-top将其推到视口底部。

实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer Flex实现</title>
    <style type="text/css">
        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .main {
            flex-grow: 1;
            background-color: #ccc;
        }
        .footer {
            height: 0;
            margin-top: auto;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 网页中的主要内容 -->
    </div>
    <div class="footer">
        <!-- 网页底部的内容 -->
    </div>
</body>
</html>

该代码中,使用了display: flex来将网页全部撑满整个视口;使用了flex-grow: 1来将主要内容的容器撑满整个视口;使用了margin-top: auto来将尾部内容推到视口底部。

三、套路二:用grid实现

这种套路的主要思路是:

  • 用grid将网页分为两行:第一行放置主要内容,第二行放置网页底部;
  • 将第二行的高度设置为0,并使用 grid-row: 2来定位到视口底部。

实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer Grid实现</title>
    <style type="text/css">
        body {
            height: 100%;
            display: grid;
            grid-template-rows: auto 0;
            grid-template-areas:
                "main"
                "footer";
        }
        .main {
            grid-area: main;
            background-color: #ccc;
            height: 100%;
        }
        .footer {
            grid-area: footer;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
            height: 0;
            grid-row: 2;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 网页中的主要内容 -->
    </div>
    <div class="footer">
        <!-- 网页底部的内容 -->
    </div>
</body>
</html>

该代码中,使用了display: grid和grid-template-rows将网页分为两行;使用grid-area将主要内容和底部容器定位到相应的位置;使用grid-row: 2将底部容器定位到视口底部。

四、示例说明

下面,我将通过两个示例来说明如何使用以上的两种套路:

示例一

网页中的主要内容包括一个固定高度的头部和一个主体区域,主体区域中的内容比较少,底部需要放置一个版权信息区域,版权信息需要保证在视口底部。

该示例可以使用flex套路来实现。具体实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer示例一</title>
    <style type="text/css">
        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header {
            height: 100px;
            background-color: #ccc;
        }
        .main {
            flex-grow: 1;
            background-color: #ddd;
            display: flex;
            flex-direction: column;
        }
        .footer {
            height: 60px;
            margin-top: auto;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <!-- 主体内容 -->
    </div>
    <div class="footer">版权信息</div>
</body>
</html>

其中,网页被分为了三个部分:头部、主体和底部。主体部分使用了flex实现。

示例二

网页中的主要内容包括一个固定高度的头部和一个较长的主体区域,主体区域中有一个按钮,当按钮被点击时,会在主体区域中动态添加一些内容。底部需要放置一个版权信息区域,版权信息需要保证在视口底部。

该示例可以使用grid套路来实现。具体实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer示例二</title>
    <style type="text/css">
        body {
            height: 100%;
            display: grid;
            grid-template-rows: 100px auto 0;
            grid-template-areas:
                "header"
                "main"
                "footer";
        }
        .header {
            grid-area: header;
            background-color: #ccc;
        }
        .main {
            grid-area: main;
            background-color: #ddd;
            position: relative;
        }
        .button {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 10px;
            background-color: #333;
            color: #fff;
            cursor: pointer;
            z-index: 2;
        }
        .content {
            position: relative;
            z-index: 1;
        }
        .footer {
            grid-area: footer;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
            height: 0;
            grid-row: 3;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <div class="button">添加内容</div>
        <div class="content">
            <!-- 主体内容 -->
        </div>
    </div>
    <div class="footer">版权信息</div>
    <script>
        //按钮点击事件,添加内容
        document.querySelector('.button').addEventListener('click', function() {
            let content = document.createElement('div');
            content.innerHTML = '这是新添加的内容';
            document.querySelector('.content').appendChild(content);
        });
    </script>
</body>
</html>

其中,网页被分为了三个部分:头部、主体和底部。主体部分使用了grid实现,并且在其中动态添加了新的内容。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解Sticky Footer 绝对底部的两种套路 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • vue中(el-button的五种类型,三种css格式)

    当我们在Vue项目中使用Element UI组件库时,会经常使用到el-button这个按钮组件。它有五种不同类型:primary、success、warning、danger和info,分别代表不同的状态,可根据需求进行选择。 除了类型之外,el-button 同时支持三种 css 格式:默认、朴素和圆形。其中默认格式带有边框和背景色,朴素格式仅有文字而无…

    css 2023年6月9日
    00
  • CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

    实现兼容性的渐变背景效果是Web前端开发中一个比较重要的课题,因为不同的浏览器对于CSS3渐变背景效果的支持程度不太一样,有些浏览器并不支持CSS3的渐变背景效果,因此需要我们进行一定的兼容性处理。下面是一个实现CSS兼容性的渐变背景效果的攻略,供大家参考: 一、背景知识 CSS3渐变背景效果 CSS3渐变背景是一种使用简单的CSS语法来实现渐变效果的技术,…

    css 2023年6月9日
    00
  • jQuery实现表格颜色交替显示的方法

    下面就详细讲解一下“jQuery实现表格颜色交替显示的方法”的完整攻略。 1. 利用CSS实现表格交替颜色显示 首先,我们可以通过CSS来实现表格交替颜色显示。具体实现方法如下: tr:nth-child(odd) { background-color: #f9f9f9; /* 偶数行 */ } tr:nth-child(even) { background…

    css 2023年6月10日
    00
  • 利用CSS定位背景图片的常用方法总结

    关于“利用CSS定位背景图片的常用方法总结”的攻略,我详细讲解如下: 1. 使用background-position属性定位背景图片 background-position属性用于控制背景图片的位置,其中包含两个值,一个是水平方向的位置(left、center、right),另一个是垂直方向的位置(top、center、bottom)。 语法: backg…

    css 2023年6月9日
    00
  • css实现三栏布局的几种方法及优缺点

    下面是详细讲解“css实现三栏布局的几种方法及优缺点”的完整攻略。 一、三栏布局 三栏布局指的是一个页面中分别拥有左侧栏、中间栏和右侧栏,其中中间栏宽度固定,左右两栏宽度自适应,三栏均处于同一行。 二、实现方式 1. 使用浮动 使用浮动可以很方便地实现三栏布局,主要是通过给左右两栏设置宽度和浮动属性,然后设置中间栏的宽度和与左右两栏的距离即可。 <di…

    css 2023年6月10日
    00
  • vue中渐进过渡效果实现

    下面是关于Vue中渐进过渡效果实现的完整攻略。 简介 在Vue中,过渡效果是一个非常重要的特性。可以用来创建动态的交互,使用户界面更加优雅、平滑。渐进效果是过渡效果中一种常见的类型。在渐进效果中,页面元素的出现或消失不是瞬间完成的,而是平滑地、逐渐地完成的。在这里,我们将介绍如何在Vue中实现渐进效果。 步骤 1. 安装Vue 首先,我们需要安装Vue。在命…

    css 2023年6月10日
    00
  • css样式important规则的正确使用方式

    下面是“CSS样式important规则的正确使用方式”的完整攻略: 正确使用important规则 仅在必要时使用important规则 在开发网站时,有时可能会遇到无法通过其他方式覆盖特定CSS样式的情况。这时候可以考虑使用important规则来强制使用该样式。但是,important规则应该只在必要时使用。如果在大量使用important规则,将变得…

    css 2023年6月9日
    00
  • CSS精灵图(图片合并)设置方法详解

    CSS精灵图(CSS Sprites)是一种将多个小图片合并成一张大图片,并用CSS来控制显示的技术。使用CSS精灵图可以减少网页的HTTP请求次数,提高网站的加载性能和用户体验。 下面详细讲解CSS精灵图的完整攻略。 准备小图片 首先,准备多个小图片,并将它们合并成一张大图片。可以使用PS等工具来完成这个过程,或者使用在线工具如CSS Sprite Gen…

    Web开发基础 2023年3月20日
    00
合作推广
合作推广
分享本页
返回顶部