网页内容很少时让footer处于最下方

程序笔记 2024年08月28日09:27

要实现在内容很少时保持 footer 在最下方，而内容很多时在所有内容底部，可以使用CSS的Flex布局。这样可以确保在页面内容不足以填满整个视口时，footer 保持在视口底部，而在内容超出视口时，footer 在所有内容底部。

下面是使用 Flexbox 的示例代码：

HTML 结构：

<!DOCTYPE html>
<html>

<head>
    <!-- 页面头部信息 -->
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            background-color: #ccc;
        }

        h1,
        h2 {
            color: #fff;
            text-align: center;
        }

        .container {
            flex: 1;
            background: #333;
        }

        .footer {
            /* 可根据需要设置 footer 的背景颜色 */
            background-color: #666;
        }
    </style>
</head>

<body>
    <header>
        <h1>Title</h1>
    </header>
    <div class="container">
        <h2>Content</h2>
        <!-- 网页内容放在这里 -->
    </div>
    <footer class="footer">
        <h2>Footer</h2>
        <!-- Footer 内容放在这里 -->
    </footer>
</body>

</html>

实现效果：

使用上面的 CSS，当页面内容很少时，footer 会保持在视口底部。而当内容很多时，footer 会在所有内容的底部，不会覆盖在内容上面。这样可以根据实际内容来灵活调整 footer 的位置。

站心网

要实现在内容很少时保持 footer 在最下方，而内容很多时在所有内容底部，可以使用CSS的Flex布局。这样可以..

为您推荐

押注配送速度，Temu在韩国卷出新高度

跨境电商 2025年04月02日

文：习芮编辑：小戎出品：增长工场Temu 在韩国的“加码”还在继续。继年初开放韩国卖家入驻，2 月在韩国布局本地仓后，3 月 21 日，Temu 宣布与韩国乐天集团旗下物流子公司乐天全球物流签署长期租约，租用位于京畿道..

让别人舒服的程度，决定你的人生高度

程序人生 2025年03月15日

1.李嘉诚的平易近人有人说，真正的牛人都是非常平易近人的。李嘉诚就是这样一个人。无论面对高官巨贾，还是普通众人，他都表现出平易近人的态度，不端架子，照顾每个人的情绪，让对方感到和风般的舒服。地产行业大佬..

学习最重要是方法，管理最重要是高度

程序人生 2025年03月15日

技术学习要兼顾深度和广度夯实技术基础这么多年来，我面试了很多人。我越发感到「技术基础」非常重要。很多技术的本质是一样的。技术基础足够好的话，学东西可以非常快。往下到操作系统层面，甚至计算机硬件层面，你..

CSS砌体布局示例和使用场景

程序笔记 2024年12月30日

CSS砌体布局（Masonry Layout）CSS砌体布局是一种网页布局技术，它的灵感来源于砖石墙的排列方式，类似于“拼图”或“拼砖”的效果。在砌体布局中，元素的排列并不完全遵循传统的网格布局规则，..

使用CSS columns-visibility实现砌体布局

程序笔记 2024年12月30日

CSS的 columns 属性（如 columns、column-count 和 column-width）通常用于多列文本布局，而不是直接用于砌体布局。然而，结合 columns 和 visibility 属性，可以在某些情况下实现类似砌体布局的效果，虽然它并不完..

ASP.NET 中的 Session 丢失或无法保持状态

程序笔记 2024年12月09日

在 ASP.NET 中，如果遇到 Session 丢失或无法保持状态的问题，通常是由于配置错误、服务器设置不当或跨服务器部署的 Session 状态管理问题。以下是一些常见原因和解决方法：1. Session 超时ASP.NET 默认的 Sessio..

通过js修改tinymce的编辑器的内容

程序笔记 2024年11月24日

在网页开发中，TinyMCE是一个流行的富文本编辑器。它允许用户轻松地创建和编辑HTML内容，而无需直接操作代码。然而，有时我们可能需要通过JavaScript来动态修改编辑器中的内容。本文将介绍如何使用JavaScript来修改T..

几个超级实用但很少人知道的 VS 技巧

程序笔记 2024年11月23日

大家好，今天分享一些实用的 VS 技巧，而这些技巧我发现很多人都不知道。因为我经常在工作中遇到：我在同事电脑上解决问题，或在会议上演示代码示例时，使用了一些 VS “骚”操作，他们会好奇地问：你是怎么做到的？..

常用的javascript网页数字滚动插件

程序笔记 2024年11月13日

在网页开发中，数字滚动效果广泛用于展示统计数据、计数器、动画化的数字效果等。以下是几款常用的 JavaScript 数字滚动插件：1. CountUp.js简介: CountUp.js 是一个轻量级的数字滚动插件，提供平滑的数字滚动动画效..

js使用IntersectionObserver实现锚点在当前页面视口时导读高亮

程序笔记 2024年11月01日

在 JavaScript 中可以通过监听页面滚动事件，检查每个锚点的位置，并根据当前滚动位置高亮相应的导航项，从而实现页面内锚点链接的导读高亮效果。交叉观察器 API（Intersection Observer API）提供了一种异步检测目..

DrissionPage 基于Python的网页自动化工具

程序笔记 2024年10月23日

在数字化时代，网页自动化工具成为开发人员和数据分析师的得力助手。今天，我们将深入探索一款名为 DrissionPage 的全能网页自动化工具，它以其强大的功能和优雅的语法，成为 Python 程序员的新宠。什么是 DrissionP..

asp.net母版页和内容页PageLoad顺序

程序笔记 2024年10月18日

关于ASP页面Page_Load发生在事件之前而导致的问题已经喜闻乐见，以下是内容页和母版页（如果有）的事件发生顺序： ContentPage.PreInit Master.Init ContentPage.Init ContentPage.InitComplite ContentPage.PreLoa..

Winform不同分辨率系统下界面混乱

程序笔记 2024年10月17日

产生界面混乱的主要原因是，winform程序的坐标是基于点(Point)的，而Point又与DPI相关。一英寸 = 96pixels96DPI是windows的默认DPI，当它被用户更改后，可能就会导致界面与设计之初产生了错乱。在网上搜索相关资料后..

使用htmlagilitypack+xpath抓取网页内容示例

程序笔记 2024年10月16日

本文使用htmlagilitypack+xpath抓取网页内容示例，用简单的例子展示如何使用htmlagilitypack抓取网页，可以用来做数据采集等功能。用htmlagilitypack+xpath抓取网页内容示例源码下载首先在nuget中获取htmlagilitypac..

.Net Core HttpClient读取GB2312网页乱码

程序笔记 2024年10月12日

.NET Core使用HttpClinet抓取网页，使用Encoding.UTF8.GetString(arr)方法获取网页内容时中文会变成乱码。但是如果改为Encoding.GetEncoding("gb2312").GetString()方法的话会报错：'gb2312' is not a supported enc..