首页 程序笔记 css页面内容不够高footer始终位于页面底部

css页面内容不够高footer始终位于页面底部

当页面内容很少的时候,footer会在页面中间就很难看,所以希望通过css实现当页面内容不够高时,footer始终位于页面底部。

修改前是这样的,假设内容很少,footer就在屏幕中间

通过Flex实现方法,直接上代码:

<html>
<body>
<header></header>
<div class="page-content">
页面html结构是这样的
</div>
<footer></footer>
</body>
</html>

实现css样式:

html {
height:100%;
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
.page-content {
flex-grow:1;
}

把中间页面内容flex-grow设为1,这样会自动撑开,这样当页面高度不够时,footer也会被撑到页面底部。下图是实现后的效果:

这样修改后,页面高度足够高时的表现就和普通的没有区别出现滚动条往下滚后看到footer内容。

站心网

当页面内容很少的时候,footer会在页面中间就很难看,所以希望通过css实现当页面内容不够高时,footer始终..

为您推荐

js 刷新当前页面

本文为大家介绍三种js 刷新当前页面的方法:reload() 方法;replace() 方法;页面自动刷新;方法1:reload() 方法reload()方法用于刷新当前文档。reload() 方法类似于你浏览器上的刷新页面按钮。location.reload();方法..

JavaScript 页面跳转、页面重定向

JavaScript 实现页面跳转重定向可以使用以下两种方法:window.location.replace("url")类似 HTTP 重定向将地址替换成新 url,该方法通过指定 URL 替换当前缓存在历史里(客户端)的项目,因此当使用 replace 方法之..

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

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

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

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

js使用scroll事件实现锚点滚动到页面顶部时导航高亮

在 JavaScript 中,可以通过监听页面滚动事件,并判断页面顶部与各个锚点的距离来实现导航高亮效果。当某个锚点的内容块滚动到页面顶部时,自动高亮相应的导航项。以下是实现方式:1. HTML 结构假设我们有多个内容区..

Response.Redirect目标页面无法取到Session值

今天开发做一个登陆界面,登陆成功后通过Response.Redirect重定向到登陆后的目标页面。 目标页面做了登陆验证,如果Session中用户信息不存在,则需要重新登陆。结果发现登陆成功后,将用户信息保存到了Session中,..

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

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

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

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

.NET Core MVC页面输出中文被编码了

如果在使用 .NET Core MVC 时发现页面上的中文字符被编码了,可能是由于的网页编码与的实际编码不匹配所致。可以尝试以下解决方法:在Program.cs文件中注册HtmlEncoder.Create服务:using System.Text.Encodings.Web..

.NET Core不重新编译立即更新页面

在 .NET Core 中,你可以使用一种称为 "Razor Pages" 或 "Razor Views" 的技术来实现页面的热重载,即不需要重新编译应用程序就能立即更新页面。这通常用于开发环境中,以提高开发人员的生产力。以下是一些方法来实..

.NET Core Web网站设置默认页index.html

.NET Core Web网站设置默认页index.html。原来IIS可以设置默认静态页面index.html,index.htm等,项目切换到.NET Core后,发现原来一些地址无法打开了,因为这些地址都是到某个文件夹,没有打全index.html。解决办法..

IOS页面滚动时输入框光标错位不跟随

最近在做一个前端项目时碰到IOS页面滚动时输入框光标错位不跟随这个问题,网上也查阅了很多解决方法。目前看到比较多出现这种情况的原因是IOS对fixed定位不友好导致。但是我不使用fixed定位也能重现出这个问题。我出..

TinyMCE使用jquery.validate提交表单时内容为空 不兼容

最近把博客的编辑器从百度编辑器改为TinyMCE,提交表单时发现用jquery.validate插件验证表单时不会验证textarea,如果不验证直接ajax提交表单的话,textarea的值是空的。查看元素可以看到使用TinyMCE初始化后,真实..

网站防止爬虫采集的方法有哪些?

网站防采集是一种常见的保护措施,用于防止恶意程序或自动化工具通过抓取网站上的数据。以下是一些常见的网站防采集方法:Robots.txt文件:通过在网站根目录下放置robots.txt文件,可以告诉搜索引擎爬虫或其他抓取工..

vscode中自动将json格式的内容自动生成对应的代码

JSON是各种编程语言中都很常用的数据格式,如Java,JavaScript,C#等语言中都常用JSON传输数据或保存一些配置信息,要序列化或反序列化字符串,在代码中需要有对应与JSON内容的类才方便实现。vscode是非常强大的插件..

通过css设置a标签锚点页面顶部padding距离

通过#hash值可以跳转到页面锚点位置,这样可以方便用户浏览页面内容。但是滚动到锚点元素位置时,他会紧贴着页面上方顶部。如果网站有固定在顶部的header导航,那么锚点内容会被header导航遮挡。尝试了一些解决方法..

Visual Studio vs2022性能分析工具性能探查器使用方法

Visual Studio 2022 提供了多种性能分析工具,可用于分析和优化代码性能。下面是一些常见的性能分析工具及其使用方法:CPU 使用率该工具可用于监测 CPU 使用情况,并可在 Visual Studio 中查看每个函数和代码段的 CP..

HTML5实现刮刮卡的效果

HTML5实现类似刮刮卡的功能 上面是最终实现刮刮卡效果 注意要点设置: 1.设置用户缩放:user-scalable=no|yes [java] view plaincopyprint? <meta name="viewport" content="width=device-width, initial-scale=1, m..

linux中USB设备的绑定和解绑(类似于Windows中disable和enable)

前言在Linux中要通过命令实现USB设备的enable和disable,类似于在Windows设备管理器中禁用再启动设备一样,在某些场景,如调试USB固件时,重新加载了固件时,又不希望物理上插拔设备时,可以采用绑定和解绑这种方式..

JS粒子特效jQuery插件particleground

Particleground 粒子系统是一个jQuery插件,相当时髦富有科技感的背景。很多区块链公司网站都使用该特效。Particleground包括一个可选的视差效应控制鼠标在桌面设备和移动设备上的陀螺仪。它适用于任何浏览器支持HTM..

发表回复

返回顶部