如何实现页脚置底？？？

最新推荐文章于 2021-08-03 19:34:47 发布
最新推荐文章于 2021-08-03 19:34:47 发布
阅读量298 收藏
点赞数 1
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46399258/article/details/117321712
版权
本文详细介绍了如何使用CSS实现页脚始终置底的四种常见方法：通过负margin调整.content和.footer，设置.footer的负margin-top，利用calc()计算.content高度，以及运用Flexbox和Grid布局。每种方法都有其适用场景，可灵活应用于不同类型的网页设计中。
摘要由CSDN通过智能技术生成

如何实现页脚置底？？？

将 .content 的 margin-bottom 设为负数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sticky Footer</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        text-align: center;
      }

      .content {
        min-height: 100%;
        margin-bottom: -50px; /* 等于 .footer 高度的相反数 */
      }

      .content-inside {
        background-color: #c2ffa9;
      }

      .push {
        height: 50px; /* .push 是额外的占位元素，高度与 .footer 一致 */
      }

      .footer {
        height: 50px;
        line-height: 50px; /* 实现文字垂直居中 */
        background-color: #3ba4f9;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <!-- div.content-inside 的高度可以随意设置，亦可根据内容高度自适应 -->
      <div class="content-inside">
        <!-- content -->
        <div>Content</div>
        <div>Content</div>
        <div>Content</div>
      </div>
      <!-- div.push 是额外的占位元素，高度与 div.footer 一致 -->
      <div class="push"></div>
    </div>
    <div class="footer">Sticky Footer</div>
  </body>
</html>

将 .footer 的 margin-top 设为负数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sticky Footer</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        text-align: center;
      }

      .content {
        min-height: 100%;
      }

      .content-inside {
        background-color: #c2ffa9;
      }

      .footer {
        height: 50px;
        line-height: 50px; /* 实现文字垂直居中 */
        background-color: #3ba4f9;
        margin-top: -50px; /* 等于 .footer 高度的相反数 */
      }
    </style>
  </head>
  <body>
    <div class="content">
      <!-- div.content-inside 的高度可以随意设置，亦可根据内容高度自适应 -->
      <div class="content-inside">
        <!-- content -->
        <div>Content</div>
        <div>Content</div>
        <div>Content</div>
      </div>
    </div>
    <div class="footer">Sticky Footer</div>
  </body>
</html>

使用 calc() 设置 .content 的高度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sticky Footer</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        text-align: center;
      }

      .content {
        /* 如果 .content 与 .footer 之间有间距，记得减去 */
        min-height: calc(100vh - 50px);
      }

      .content-inside {
        background-color: #c2ffa9;
      }

      .footer {
        height: 50px;
        line-height: 50px; /* 实现文字垂直居中 */
        background-color: #3ba4f9;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-inside">
        <!-- content -->
        <div>Content</div>
        <div>Content</div>
        <div>Content</div>
      </div>
    </div>
    <div class="footer">Sticky Footer</div>
  </body>
</html>

使用 Flexbox 弹性布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sticky Footer</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        text-align: center;
      }

      body {
        min-height: 100%;
        display: flex;
        flex-direction: column;
      }

      .content {
        flex: 1;
      }

      .content-inside {
        background-color: #c2ffa9;
      }

      .footer {
        /* 这种方案不需要固定 .footer 的高度 */
        background-color: #3ba4f9;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-inside">
        <!-- content -->
        <div>Content</div>
        <div>Content</div>
        <div>Content</div>
      </div>
    </div>
    <div class="footer">Sticky Footer</div>
  </body>
</html>

使用 Grid 网格布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sticky Footer</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        text-align: center;
      }

      body {
        min-height: 100%;
        display: grid;
        grid-template-rows: 1fr auto;
      }

      .content-inside {
        background-color: #c2ffa9;
      }

      .footer {
        grid-row-start: 2;
        grid-row-end: 3;
        background-color: #3ba4f9;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-inside">
        <!-- content -->
        <div>Content</div>
        <div>Content</div>
        <div>Content</div>
      </div>
    </div>
    <div class="footer">Sticky Footer</div>
  </body>
</html>
X W F
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
如何确保页脚始终位于页面底部？
liuhao9999的博客
11-02 968
尝试创建精美的网站时，防止页脚在页面上浮动非常重要。内容较短的页面可能会遇到此问题，但只需几行 CSS 即可轻松修复。您可以使用弹性框来确保页脚始终位于页面底部。然后，给元素 a，使其边距填充它和它以前的同级之间的剩余空间。请注意，此技术不会拉伸前一个同级，而是将页脚推到页面底部。根据您的需求，一个可能比另一个更合适。一般来说，网格在大多数情况下更灵活，如果您有更复杂的布局（可能包括标题或侧边栏），网格会有所帮助。您也可以以非常类似的方式使用网格。在这种情况下，利用该单元来拉伸元素以填充剩余空间。
html5如何使页脚置底,CSS如何让页脚固定在页面底部
weixin_36376879的博客
06-03 1514
在进行Web开发实现页面时，可能会遇到这样一种场景：将页脚footer固定在页面的底部，如果页面的主体不能充满屏幕高度，则footer位于屏幕的底部；如果页面的主体超出了屏幕高度，则footer始终位于页面底部。场景的示意如下图，那么如何将页脚始终固定在页面底部呢？一般来说，有两类方法可以达到此目的，一种是仅仅使用css技巧并配合特定的html结构；另一种是使用js代码操作dom元素。本文将介绍三...
CSS 五种方式实现 Footer 页脚置底
程序猿开发日志【学习永无止境】
02-22 5805
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 实现方法 1. 将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当
footer.php置底,详解CSS五种方式实现Footer置底
weixin_42106357的博客
03-10 537
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。方法一：将内容部分的margin-bottom设为负数footerhtml, body {margin: 0;padding: 0;height: 100%;}.wrapper {...
css段落置底,CSS 五种方式实现 Footer 置底
weixin_35615322的博客
08-03 689
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。实现方法1. 将内容部分的底部外边距设为负数这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则...
footer.php置底,使用CSS实现Footer置底的五种方式
weixin_39942191的博客
03-10 109
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。方法一：将内容部分的margin-bottom设为负数footerhtml, body {margin: 0;padding: 0;height: 100%;}.wrapper {...
footer.php置底,CSS五种方式实现Footer置底
weixin_35308269的博客
03-10 145
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。方法一：将内容部分的margin-bottom设为负数footerhtml, body {margin: 0;padding: 0;height: 100%;}.wrapper {...
利用flex让页脚自适应置底显示
weixin_30393907的博客
07-18 167
昨天帮朋友写个简单的页面，由于没有传后台数据所以页面写完主体部分很短，是的footer页脚没有显示在视窗的底部。 最后用flex的拉伸性解决了。 看一下css代码 html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-famil...
footer.php置底,在CSS实现Footer置底的几种方式
weixin_35823403的博客
03-10 115
这次给大家带来在CSS实现Footer置底的几种方式，在CSS实现Footer置底的注意事项有哪些，下面就是实战案例，一起来看一下。页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。方法一：将内容部分的margin-bottom设...
div+css如何实现页脚的置底
10-30
以上介绍了三种常见的使用div+css实现页脚置底的方法。每种方法都有其适用场景： - **Flexbox**：适用于大多数现代浏览器，易于理解和维护。 - **Grid布局**：提供了更强大的布局控制能力，适合更复杂的设计需求。 -...
详解CSS五种方式实现Footer置底
12-30
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部...
网页元素置底效果
05-14
在网页设计中，"网页元素置底效果"是一种常见的布局技术，目的是使特定的元素（如页脚）始终保持在浏览器视口的底部，即使页面内容很长需要滚动浏览时也是如此。这种效果可以提供一种稳定的视觉体验，使用户在任何...
置顶和置底的js
09-14
在网页开发中，"置顶"和"置底"的功能是非常常见的需求，它们通常用于实现元素固定在页面顶部或底部，即使用户滚动页面也不受影响。本文将深入探讨如何使用JavaScript来实现这两种效果，并提供相关代码示例。 首先，...
常见的JS语言错误总汇
X W F
08-14 4643
1、 Uncaught TypeError: Cannot Read Property 这是 JavaScript 开发人员最常遇到的错误。当你读取一个属性或调用一个未定义对象的方法时，Chrome 中就会报出这样的错误。导致这个错误发生的原因有很多，常见的一种情况是在渲染 UI 组件时，不正确地初始化状态。 2、 TypeError: ‘undefined’ Is Not an Object (evaluating…) 这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Saf
通过JS方式实现隐藏手机号码中间4位数
X W F
07-24 2720
在前端开发中，遇到如下需求：隐藏手机号码，将中间几位替换为*。通过js如何实现手机号码隐藏中间4位呢？下面整理几种实现方式： 1、使用正则: function geTel(tel){ var reg = /^(\d{3})\d{4}(\d{4})$/; return tel.replace(reg, "$1****$2"); } //测试 var tel = "17326453333"; console.log(geTel(tel));//173****3333 2、通过长度截取 fu
最常见的JavaScript错误及其解决方法
X W F
05-05 2150
文章目录1、未获取TypeError：无法读取属性2、TypeError：“undefined”不是对象3、 TypeError：“ null”不是对象4. TypeError：对象不支持属性5、TypeError：“ this.show”不是函数6、未获取RangeError 1、未获取TypeError：无法读取属性 这是列表中最常见的JS错误之一。当你尝试访问未定义对象中的属性或方法时，就会...
JavaScript+canvas 实现五子棋游戏
X W F
07-04 1788
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>五子棋
JS_使用冒泡排序，将数组中的数字从小到大排序
X W F
07-02 1626
冒泡排序：它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果他们的顺序（如从大到小、首字母从A到Z）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。 var arr=[31,21,5,2,36,6,99,4,101,2]; //外层循环：控制比较轮数 从0开始，次数小于长度-1 for(var i=1;i<arr.length;i++){ //内层循环：控制每轮比较次数 数组长度-i for(var j=0;j<a
.net 使用Itext7 给PDF添加页眉和页脚如何实现？
最新发布
07-11
你可以将`inputPdfPath`替换为你要添加页眉和页脚的PDF文件路径，将`outputPdfPath`替换为生成的带有页眉和页脚的PDF文件路径。在示例代码中，我们使用`Table`来创建页眉和页脚，`SetHeader`和`SetFooter`方法用于将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X W F

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值