通过css实现-让页面的footer始终位于底部

这篇具有很好参考价值的文章主要介绍了通过css实现-让页面的footer始终位于底部。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

当页面内容全部占满时,滑动到最下面,显示footer在底部;
当页面内容不满时,footer也是在最底部显示。
具体实现代码如下:文章来源地址https://www.toymoban.com/news/detail-579600.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
			}

			.page {
				display: flex;
				flex-direction: column;
				height: 100%;
			}

			header {
				background: green;
				flex: 0 0 auto;
			}

			.content {
				background: #ccc;
				flex: 1 0 auto;
			}

			footer {
				background: green;
				flex: 0 0 auto;
			}
		</style>
	</head>
	<body>
		<body>
			<div class="page">
				<header> 头部 </header>
				<div class="content">
					这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!
				</div>
				<footer> 底部 </footer>
			</div>
		</body>
	</body>
</html>

到了这里,关于通过css实现-让页面的footer始终位于底部的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css样式-内容固定在页面底部,不随滚动条滚动

    目录 1、内容固定在页面底部,不随着滚动条滚动 2、添加内容,简单测试是否固定  position:                 1、【relative】相对定位;2、【absolute】绝对定位;                  3、【fixed】固定定位;4、【static】默认值;5、【sticky】粘性定位。 这里设置为fixed,

    2024年02月11日
    浏览(53)
  • CSS实现底部弧度效果

    效果图如下 说明: 使用伪类处理,先将元素自身定位为relative; 伪类设置content:‘’,并相对定位为absolute,通过设置left ,top 值,改变width和和left来调节弧度。 宽度需大于100%,将left设为(100%-宽度)/ 2,伪类宽度越接近100%,弧度越大 。

    2024年02月15日
    浏览(90)
  • vue element-ui分页插件 始终保持在页面底部样式

    最近在写前端页面的时候,有一个小需求就是保证分页插件一直保持在底部,表单数据增多的时候出现竖向的滚动条。 直接上代码 样式 效果展示

    2024年02月11日
    浏览(50)
  • 通过CSS简单修饰用户登录页面

    目录 前言 一、CSS代码 二、HTML部分 1、用户登录 2、用户注册 3、注册成功 4、找回密码 5、重置密码 6、重置成功 三、运行效果图         前几天老师要求用CSS和HTML做的一个用户登录页面,个人感觉这些知识入门挺简单的,精通的话不太容易,这里就用入门知识简单做一

    2024年01月20日
    浏览(37)
  • HTML+CSS实现视频背景页面

    HTML: CSS:  效果图:  video资源网站:https://mazwai.com/  参考自B站教程:12-视频背景页面_哔哩哔哩_bilibili

    2024年02月04日
    浏览(46)
  • (css)文字与底部对齐

    修改前: 修改后: 代码: 解决参考:https://blog.csdn.net/qq_17335549/article/details/126866546

    2024年02月13日
    浏览(36)
  • css3实现页面元素抖动效果

    html js(vue3) css 参考链接:https://juejin.cn/post/6957517187049324552

    2024年02月07日
    浏览(44)
  • html + css 实现淘宝首页(静态页面)

    html + css 实现淘宝首页(静态页面) 待续。。。 效果图: html代码如下: css代码如下:

    2024年02月11日
    浏览(50)
  • HTML/CSS实现3D翻转页面效果

    下面是一个基本的例子,展示了如何使用CSS和HTML实现一个3D页面翻转效果: HTML部分: CSS部分: 在这个例子中,我们使用一个包含两个面(正面和背面)的容器div。通过CSS的 transform 属性和 rotateY 函数,我们实现了容器在鼠标悬停时的旋转效果。 你可以根据自己的需求调整容

    2024年01月24日
    浏览(46)
  • 通过CSS实现渐变色边框

    1. 使用border-image实现渐变色边框,边框圆角 这种方式虽然简单但有个明显的缺陷,不支持设置 border-radius ,外框想设置成圆角需要加 优点: 内容背景可以透明 2. 使用 background-image实现渐变色边框,边框圆角 缺点: 内容背景不能半透明 实现复杂 不能使用padding 不是内圆角 3、

    2024年02月02日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包