当前位置：文江博客话题详情

添加始终显示在屏幕底部的页脚？

发布于 2024-11-10 05:59:48 字数 211 浏览 5 评论 0原文

即使页面内容非常小，我如何添加始终位于屏幕底部的页脚，

例如问题，假设我有一个页面，其中显示的内容不多，因此页脚变为屏幕中间。我能否确保如果页面内容不多，则页脚位于屏幕底部？

更新

当没有足够的内容来填充整个屏幕时，我只想要一个位于屏幕底部的页脚（即我不希望页脚显示在屏幕中间）然后如果有足够的内容，就可以将其放在页面底部。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残龙傲雪 2024-11-17 05:59:56

页脚显示在页面底部>

body {
 height: 100%;
}

.content{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer{
  margin-top: auto;
}

使用内容类作为页面数据和页脚作为页脚

The footer is shown at the bottom of the page>

body {
 height: 100%;
}

.content{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer{
  margin-top: auto;
}

Use content class as page data and footer for footer

回复收藏 0 原文

眉黛浅 2024-11-17 05:59:55

使用引导类

 <footer class="container-fluid text-center">
   <div class="footer navbar-inverse navbar-fixed-bottom">
     <p>Footer is here</p>
   </div>
 </footer>

Use bootstrap class

 <footer class="container-fluid text-center">
   <div class="footer navbar-inverse navbar-fixed-bottom">
     <p>Footer is here</p>
   </div>
 </footer>

回复收藏 0 原文

命硬 2024-11-17 05:59:54

您还可以使用粘性来定位位置，如下所示：

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

您可以运行此代码来查看这是否是您所使用的固定页脚类型
寻找。

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>

You can also use sticky for the position as shown below:

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

You can run this code to see if this is the type fixed footer you are
looking for.

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>

回复收藏 0 原文

无需解释 2024-11-17 05:59:54

您需要使用绑定到页面底部的固定位置元素。

假设您使用 div 来包含页脚，您将需要一些像这样的 css：

div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}

当用户调整表单大小时，您可能需要更新高度和宽度。您可能还需要调整页面加载的宽度。

You'll want to use a fixed position element that is bound to the bottom of the page.

Say you use a div to encompass the footer, you'll want some css like this:

div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}

You'll probably want to update the height and width when a user resizes the form. You probably will need to resize the width on pageload as well.

回复收藏 0 原文

杯别 2024-11-17 05:59:52

使用以下 CSS 属性：

position: fixed;
bottom: 0px;

use the following css properties:

position: fixed;
bottom: 0px;

回复收藏 0 原文

感悟人生的甜 2024-11-17 05:59:52

这是一个仅 CSS 的解决方案，不需要 jQuery。使包装器的最小高度为 100% 并相对定位，然后将页脚绝对定位到左下角：

#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

来源

Here's a CSS only solution, no jQuery needed. Make the wrapper's minimum height 100% and position it relatively, then position footer absolutely to bottom left:

#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

Source

回复收藏 0 原文

蹲墙角沉默 2024-11-17 05:59:51

您正在寻找“粘性页脚”，本文展示了您可以使用的一些技术：

https://css-tricks.com/ Couple-takes-sticky-footer/

这是 Flexbox 版本： http://codepen.io/chriscoyier/pen/RRbKrL

HTML：

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS：

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

You're after a "sticky footer", this article shows some of the techniques you can use:

https://css-tricks.com/couple-takes-sticky-footer/

Here's the flexbox version: http://codepen.io/chriscoyier/pen/RRbKrL

HTML:

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS:

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

回复收藏 0 原文

~没有更多了~

关于作者

情释

暂无简介

0 文章

0 评论

23 人气

关注发私信

Gabu-gabumon

文章 0 评论 0

关注

qq_CgiN62

文章 0 评论 0

关注

荔枝明

文章 0 评论 0

关注

赏烟花じ飞满天

文章 0 评论 0

关注

独守阴晴ぅ圆缺

文章 0 评论 0

关注

¤→小豸慧

文章 0 评论 0

友情链接

文江博客

添加始终显示在屏幕底部的页脚？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

添加始终显示在屏幕底部的页脚？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。