Code
2024-01-28 06:00:02

如何让页脚保持在网页的底部?

我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。

当前回答

在我的网站上，我总是使用:

position: fixed;

.．.在我的CSS页脚。将它固定在页面底部。

2021-06-03 20:45:33

其他回答

我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS

它使用起来很简单。在包含库之后，只需调用这行代码。

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

页脚可以通过使用不同的参数/id调用上面的函数来动态更改。

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

注意:-你不必改变或添加任何CSS。库是动态的，这意味着即使屏幕在加载页面后调整大小，它也会重置页脚的位置。我创建了这个库，因为CSS解决了这个问题，但当显示的大小发生显著变化时，从台式机到平板电脑或反之亦然，它们要么重叠的内容，要么不再保持粘性。

另一种解决方案是CSS媒体查询，但你必须为不同大小的屏幕手动编写不同的CSS样式，而这个库自动工作，并由所有基本的JavaScript支持浏览器支持。

编辑 CSS解决方案:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

现在，如果显示的高度超过你的内容长度，我们将使页脚固定在底部，如果不是，它将自动出现在显示的最后，因为你需要滚动来查看它。

而且，它似乎是一个比JavaScript/库更好的解决方案。

2016-09-12 11:43:02

带有显示的粘性页脚:flex

解决方案的灵感来自菲利普沃尔顿的粘性页脚。

解释

此解决方案仅在以下情况下有效:

Chrome≥21.0 Firefox浏览器≥20.0 Internet Explorer浏览器≥10 Safari≥6.1

它基于伸缩显示，利用了flex-grow属性，该属性允许元素在高度或宽度上增长(当流动方向分别设置为列或行时)，以占用容器中的额外空间。

我们还将利用vh单位，其中1vh被定义为:

视口高度的1/100

因此，100vh的高度是告诉一个元素跨越整个视口高度的简洁方法。

这是你如何组织你的网页:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

为了让页脚固定在页面底部，您希望正文和页脚之间的空间增加到将页脚推到页面底部所需的大小。

因此我们的布局变成:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

实现

身体{ 保证金:0; 显示:flex; flex-direction:列; 最小高度:100 vh; ｝ .spacer { flex: 1; ｝ /*为演示的目的使它可见*/ .footer { 高度:50 px; 背景颜色:红色; ｝ 身体< > <div class="content">Hello World!< / div > < div class = "隔离" > < / div > <页脚类=“页脚”> < /页脚> 身体< / >

你可以在JSFiddle玩。

Safari怪癖

请注意，Safari对flex-shrink属性的实现有缺陷，该属性允许项缩小到显示内容所需的最小高度以上。 要解决这个问题，你必须在上面的例子中显式地将.content和页脚的flex-shrink属性设置为0:

.content {
  flex-shrink: 0;
}

.footer {
  flex-shrink: 0;
}

或者，将spacer元素的flex样式更改为:

.spacer {
  flex: 1 0 auto;
}

这种3值简写样式相当于以下完整设置:

.spacer {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

优雅的工作无处不在。

2015-12-08 01:23:17

对于自然的页眉和页脚高度使用CSS Flexbox。

参见JS Fiddle。

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}
2017-06-27 02:18:37

使用绝对定位和z-index创建一个粘脚div在任何分辨率，使用以下步骤:

创建一个脚注div, position: absolute;底部:0;以及期望的高度 设置页脚的填充，以便在内容底部和窗口底部之间添加空白 创建一个容器div，用position: relative包装主体内容;最小高度:100%; 为主内容div添加底部填充，它等于高度加上页脚的填充 如果页脚被剪切，则设置页脚的z-index大于容器div

这里有一个例子:

<!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>

2012-08-26 12:47:14

这些纯css解决方案与动态调整的内容正常工作(至少在firefox和Safari)例如,如果你有一个背景设置在容器div,页面,然后调整(添加几行)表内的div,表可以伸出的风格的底部区域,也就是说,你可以有一半的表在白色黑色主题和一半的表完成白色因为字体颜色和背景颜色是白色的。这基本上是无法修复的与meroller页面。

嵌套的div多列布局是一个丑陋的hack和100%最小高度的主体/容器div粘贴页脚是一个丑陋的hack。

我尝试过的唯一一个在所有浏览器上都可以工作的无脚本解决方案:一个更简单/更短的表，包含thead(用于标题)/tfoot(用于页脚)/tbody (td’s用于任意数量的列)和100%的高度。但这有语义和SEO的缺点(tfoot必须出现在tbody之前。尽管ARIA角色可能会帮助一些像样的搜索引擎)。

2011-02-28 04:35:38

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1