开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在页面底部使用html和css保持页脚居中？

在页面底部使用HTML和CSS保持页脚居中的方法有多种，下面是其中两种常见的实现方式：

方法一：使用flex布局

HTML结构：

<body>
  <div class="wrapper">
    <!-- 页面内容 -->
  </div>
  <footer>
    <!-- 页脚内容 -->
  </footer>
</body>

CSS样式：

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex: 1;
}

footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

这种方法通过将body设置为flex布局，并使用flex-direction: column;使内容按垂直方向排列。.wrapper元素通过设置flex: 1;来占据剩余的垂直空间，使页面内容撑开。footer元素通过设置flex-shrink: 0;来防止在内容过多时被压缩，然后使用display: flex;和justify-content: center; align-items: center;使其内容垂直水平居中。

方法二：使用绝对定位和负边距

HTML结构：

<body>
  <div class="wrapper">
    <!-- 页面内容 -->
  </div>
  <footer>
    <!-- 页脚内容 -->
  </footer>
</body>

CSS样式：

html, body {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}

.wrapper {
  padding-bottom: 50px; /* 页脚高度 */
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 页脚高度 */
}

这种方法通过给body设置position: relative;和min-height: 100%;使其撑开至整个页面高度。然后给.wrapper元素设置padding-bottom等于页脚的高度，这样页面内容就不会被页脚遮挡。最后给footer设置position: absolute;、bottom: 0;和width: 100%;使其固定在页面底部。

以上是两种常见的方法，可以根据具体需求选择适合的方式来保持页面底部的页脚居中。

相关搜索:如何使用HTML和CSS在页面底部创建两个固定的页脚？CSS使页面页脚保持在页面底部的最小高度,但不与页面重叠为什么我的页脚没有居中？(HTML和CSS)如何在bootstrap上调整大小时保持页面底部的页脚在html和css中，边框底部和右侧保持黑色如何在页面中间垂直和水平居中滑块- CSS、HTML HTML/CSS页脚从页面中间开始，然后移动到底部 HTML-页面顶部和底部的CSS按钮如何使用html和css使文本居中如何在页面向下扩展的情况下保持网页底部的页脚如何在Angular 4中处理重复的HTML代码，如页眉和页脚？如何在将HTML转换为PDF时在每个页面的底部添加页脚 CSS/html -使页脚仅在滚动后可见？停留在可见页面区域下方的底部？在html和css中为所有页面设置固定高度的页脚当另一个元素居中对齐时，使用Flexbox将页脚与页面底部对齐如何使用Html和CSS将角徽标添加到页脚？如何使用HTML和CSS在视频上居中显示图像？尝试使用前端语言(如html、css和javascript )构建骰子游戏使用HTML和CSS将图像居中对齐时出现问题如何在html页面中添加页眉和页脚而不影响其他内容

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端学习自学笔记：day09

今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ 在此之前先为大家显示下前端工程师的路线图: 第九天的笔记:HTML AND CSS: -复习：HTML类：定义类选择器：.cc{ color=""; } 类选择器引用： -复习：块级元素： :可以用作其他HTML元素的容器，同个类可以设置多个块级元素。例： -复习元素：行内元素，可以作为文本的容器，同个类可以设置多个行内元素。例：cccccc HTML布局：多列显示内容：解析：样式标签 #header {定义头部的

06

只要一行代码，实现五种 CSS 经典布局

常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。

02

计算机毕业设计 HTML+CSS+JavaScript 云南美食网页设计美食网页介绍代码

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ❤ 【作者主页——🔥获取更多优质

01

HTML/CSS/JavaScript学习笔记【持续更新】

HTML 标签定义和用法规定文本的字体、字体尺寸、字体颜色。实例规定文本字体、大小和颜色： 1 This is some text! 2 This is some text! 3 This is some text! HTML 与 XHTML 之间的差异

【建议收藏】用AI快速生成一个网页（名侦探柯南~灰原哀主题网页），适合大学生web期末大作业

在上述代码中，我们使用了 HTML 创建了一个导航栏，其中包含一个背景颜色为#D7719B的容器nav-bg和一个包含导航菜单项的容器nav-links。nav-links容器使用position:absolute定位到导航栏的右侧，宽度为 500px，高度为 60px。

01

jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

程序员都很赖，你懂的！最近在做html5页面的开发，主要做智能终端设备的开发。对于内容比较少的页面，领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这样的要求，其实一点也不过分。但对于新手来说，确实很难，很不容易，今天我就将我学习的内容一起分享一下！放置页眉和页脚的方式有三种： Inline - 默认。页眉和页脚与页面内容位于行内。 Fixed - 页面和页脚会留在页面顶部和底部。 Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部请使用 data-position 属性来定位页眉和页脚：看代码：

05

用AI快速生成一个网页（名侦探柯南~灰原哀主题网页），适合大学生web期末大作业

在上述代码中，我们使用了 HTML 创建了一个导航栏，其中包含一个背景颜色为#D7719B的容器nav-bg和一个包含导航菜单项的容器nav-links。nav-links容器使用position:absolute定位到导航栏的右侧，宽度为 500px，高度为 60px。

01

单屏页面响应式适配玩法

把公共的页头、页脚、导航栏、边框放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。

02

你不知道 CSS 可以做的 4 件事

这样就实现了延时1s，一共0.5s的淡入动画。其中ease是animation-timing-function的默认值。animation-timing-function使用了三次贝塞尔（Cubic Bezier）函数生成速度曲线，可以让我们的动画产生平滑的过渡。但是有的时候我们并不想要平滑的过渡，比如想要实现下面小人跑动的效果，该怎么实现呢？

01

如何将HTML表格转换成精美的PDF

包含表格、图表和图形的 Web 应用程序通常包含将数据导出为 PDF 的选项。你有没有想过，作为一个用户，当你点击那个按钮时，幕后发生了什么？

02

你不知道 CSS 可以做的 4 件事

这样就实现了延时1s，一共0.5s的淡入动画。其中ease是animation-timing-function的默认值。animation-timing-function使用了三次贝塞尔（Cubic Bezier）函数生成速度曲线，可以让我们的动画产生平滑的过渡。但是有的时候我们并不想要平滑的过渡，比如想要实现下面小人跑动的效果，该怎么实现呢？

03

HTML5标签2

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

04

CSS入门

我们发现，虽然标签的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在<style> 标签中，让页面设计更美观更丰富，实际上，这是通过CSS实现的。那么什么是CSS呢？

02

CSS 中经典的stick footer布局

前端开发中，会有这样一种布局，当页面内容不足一屏时，页脚在屏幕底部，当内容超过一屏时，页脚随着内容的增加而向下移动，即人们常说的的stick footer布局，如下图所示。

01

前端开发中经典的stick footer布局

前端开发中，会有这样一种布局，当页面内容不足一屏时，页脚在屏幕底部，当内容超过一屏时，页脚随着内容的增加而向下移动，即人们常说的的stick footer布局，如下图所示。

02

分享下如何在Vue项目中进行网页布局

布局是减少代码重复并创建易于维护和专业外观的应用程序的重要模式。如果您正在使用Nuxt，它提供了一个优雅的解决方案。但不幸的是，在Vue中，官方文档根本没有提到它们。这经常导致对于应该在多个应用程序中相似的问题而言，采用次优和不太正规的解决方案。

03

25个每个开发人员都应该知道的CSS 技巧

CSS（层叠样式表）是 Web 开发人员必不可少的工具，可让你精确地设置 HTML 元素的样式。但是，掌握 CSS 不仅仅需要了解基础知识。以下 25 个 CSS 技巧可以让您的生活更轻松，代码更简洁。

01

从项目中学习HTML+CSS

最近由于工作原因以及自己的懈怠，已经很久都没有更新过博客了。通过这段时间，我发现坚持一件事情是真的很难，都说万事开头难，但是在放弃这件事上好像开头了后面就顺理成章的继续下去了。中间即使不怎么情愿也在努力的每周更新博客，但是自从9月份以来，第一次因为工作需要加班而断更之后，后面好像很容易找到理由断更。从这件事上我学到了一点：在坚持一件事的时候千万要坚持，只要中间放弃一次，后续就可以心安理得的将其抛之脑后。这次在这里也是希望自己能够再次坚持之前的每周至少一更。即使没有内容。。。。感想就这么多，现在进入真正的主题——HTML+CSS相关内容的整理，因为网上针对HTML+CSS的相关知识已经很多了，而且都是很零碎的点，大多是对应的代码，也可以说是应用性极强的，我本人是不太喜欢大段大段的帖代码的。学习的过程中我喜欢从理论或者从实践开始，根据需求或者理论来写代码，需求清楚了，流程出来了，代码就是水到渠成的事。所以这次就根据具体的一个网页项目来梳理一下我这段时间学习这些东西的成果。最终的效果图如下:

03

Jump Start Bootstrap 第1章

Bootstrap是一个前端框架，可以帮助开发者启动网页开发的过程；从后端转前端的(Java、PHP等)开发者可能很难把握CSS和JavaScript；但是，使用Bootstrap,他们只要专注HTML，把棘手的CSS和JavaScript交给Bootstrap。

04

分享 10 个常见的 CSS 页面布局代码片段

大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。

05

哪些你知道或不知道的css，在这里或许都齐全

暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：

02

前端成神之路-学成在线

欲先善其事，必先利其器。先把我们的前期准备工作做好，我们本次采取结构与样式相分离思想。

03

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。

01

哪些你知道或不知道的css，在这里或许都齐全 css编码技巧 css小技巧

暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：

01

Web 技术：CSS最小和最大(宽度/高度)知识点及优缺点

通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。

02

03.HTML头部/CSS/图像/表格/列表

HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题使用 <title> 标签定义HTML文档的标题 <base> - 定义了所有链接的URL 使用 <base> 定义

2021前端最新DIV+CSS规范命名大全集合

二、相对网页外层重要部分CSS样式命名： - TOP 外套 wrap ------------------用于最外层头部 header /top----------------用于头部主要内容 main/content ------------用于主体内容（中部）左侧 main-left -------------左侧布局右侧 main-right -----------右侧布局导航条 nav -----------------网页菜单导航条内容 content ---------------用于网页中部主体底部 footer -----------------用于底部

03

Web前端开发 HTML设计经验与技巧总结

加入oninput事件oninput = "value=value.replace(/[^\d]/g,'')" 代码示例：

02

Div+CSS – 简单布局

1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。

01

「资深前端工程师总结」前端面试知识点大全——html篇

定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。)

03

建议收藏！总结了 42 种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

建议收藏！总结了42种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

5.HTML表格列表标签元素介绍

本章将主要给各位看友介绍表格 table 与列表 list 中常用的标签元素属性，本节标签一览如下所示:

03

html外边距如何归零,盒子模型的overflow属性，border属性，padding与margin属性

html外边距如何归零,盒子模型的overflow属性，border属性，padding与margin属性

02

作为前端程序员：你必须知道的常用英语词汇！！全是干货！！！

A align 对齐 active 激活 absolute 绝对 alpha 图像通道 animate 动画 animation 动画片 alert 提醒 add 加 append 添加 after 之后 B back 超过范围的三次方缓动 bounce 指数衰减的反弹缓动 before 在…之前 blur 当输入框失焦的时候触发 BOM 全称 Browser Object Model 浏览器对象模型 blur 失焦 bind 绑定 background 背景 border 边框 banner 页面上的

04

优雅设计之美：实现Vue应用程序的时尚布局

页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式。如果使用的是Nuxt，则可以提供开箱即用的优雅解决方案。然而，令人遗憾的是，在Vue中，这些问题并未得到官方文档的解决。

08

Html5 学习系列（二）HTML5新增结构标签

在本节中，笔者将向大家讲述三部分内容，分别介绍HTML5时代的召唤，跟HTML4的区别，以及HTML5中带来的新的结构标签。

01

HTML/CSS 常见面试题汇总

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

02

学生家乡网页设计作品静态HTML网页—— HTML+CSS+JavaScript制作辽宁沈阳家乡主题网页源码(11页)

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ❤ 【作者主页——🔥获取更多优质

02

从前端角度浅谈代码对SEO的影响！

正文内容：通过上面的简单介绍，想必大家也会觉得：其实前端真正对SEO比较有影响作用的还是HTML。

05

我的DW个人网站设计——安徽宣城6页HTML+CSS+JavaScript

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ❤ 【作者主页——🔥获取更多优质

05

CSS入门指南-4：页面布局

display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

01

寒假提升｜ Day7 CSS 第五部分

margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.

01

css多浏览常见问题

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是. 以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ wid

03

CSS编写规范

1、为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，也为了更好阅读、修改和提高对CSS的加载速度，CSS的编写应该遵循一定的编写规范。目前网上已经流行一些比较好的规范，大多由网友总结；大公司的CSS规范也值得我们去参考。但由于无法获取到大公司的内部资料，只能参考部分网上一些比较好的资料来制作一套自己的规范。

03

完美解决footer固定在底部

很多人认为页面页脚部分不就是用footer主义化标签包起来嘛，然而不然；如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况：

01

探秘 flex 上下文中神奇的自动 margin

水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了：

04

Python|使用HBuilder建立APP交流社区

这是对HBuilder学习后想做的一些关于这个软件的一些心得，有了这个接触，想分享一些初学者可以用到的一些使用方法，让更多初学者可以早一些熟悉HBuilder，可以熟练的运用它做出自己想要的一个界面。首先对于HBuilder的安装，安装好后新建一个移动APP的包，在里面再创建一个HTML的文件，选择函mui的HTML，然后因为是社区，就要有头部和尾部，在这里，是有head，body构成，头部在head的区域内附上代码，在body中附上底部代码，就有一个最基本的页面。然后是加入社区分享部分，我们可以加入页眉和页脚，页眉里面可以“img src”插入图片使用“class”和“style”调整格式；使用“button”在页脚插入我想要的跳转按钮，同时也可以使用“class”和“style”调整格式。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭