如何将页脚定位到屏幕的绝对底部？
将页脚定位到屏幕的绝对底部可以通过以下几种方法实现：
- 使用CSS的position属性和bottom属性：将页脚元素的position属性设置为fixed，然后使用bottom属性将其定位到屏幕底部。例如：
.footer {
position: fixed;
bottom: 0;
width: 100%;
}- 使用Flexbox布局：将页面的主要内容放置在一个容器中，并使用Flexbox布局将其垂直方向上拉伸，然后将页脚元素放置在容器外部。这样可以确保页脚始终位于页面的底部。例如：
<body>
<div class="container">
<!-- 主要内容 -->
</div>
<footer class="footer">
<!-- 页脚内容 -->
</footer>
</body>html, body {
height: 100%;
}
.container {
min-height: 100%;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}- 使用JavaScript动态计算位置：通过JavaScript获取页面内容的高度和窗口的高度，然后计算出页脚元素应该距离顶部的距离，将其定位到该位置。例如：
<body>
<div class="container">
<!-- 主要内容 -->
</div>
<footer class="footer">
<!-- 页脚内容 -->
</footer>
<script>
function positionFooter() {
var container = document.querySelector('.container');
var footer = document.querySelector('.footer');
var containerHeight = container.offsetHeight;
var windowHeight = window.innerHeight;
if (containerHeight < windowHeight) {
footer.style.position = 'fixed';
footer.style.bottom = '0';
} else {
footer.style.position = 'static';
}
}
window.addEventListener('resize', positionFooter);
positionFooter();
</script>
</body>以上是将页脚定位到屏幕的绝对底部的几种常见方法。具体选择哪种方法取决于具体的需求和页面结构。
相关·内容
2回答
当页面由绝对定位构成时，页脚到底部
html、css、css-position、footer、sticky-footer
我有一页，其中的部分是绝对定位的div's。我的问题是，我不能使用底部属性放入页脚，因为底部属性将其修复到屏幕底部，而不是页面。因此，当页面内容比屏幕长时，页脚就会在内容下面。
我不能把页脚放在元素流的底部，因为没有
浏览 3提问于2012-02-04得票数 2
回答已采纳
1回答
如何将页脚定位到屏幕的绝对底部？
html、css
我有下面的屏幕，其中使用了布局页面。此视图显示一张卡片并应用布局页面。如何将关于、服务和我们的工作的标签定位到屏幕底部。 ? 我尝试过的： <footer class="container space-1">
<div class="row align-items-md-center text-center">
浏览 24提问于2020-12-04得票数 0
回答已采纳
3回答
页脚在不同设备高度上没有正确显示。
css、footer、sticky-footer
我的脚有点问题。我有一个包含一些内容的页面，在一些设备上(比如移动放大视图)，我的页面内容不会填充父设备的高度，而在某些设备上，它会填充。页脚给这些不同的高度造成了问题。当内容未填充父设备高度时，页脚将正确显示在页面底部，但当内容填充父设备高度并溢出时，页脚将显示在内容上。内容未填充父级高度的页脚(正确显示)内容过多的页脚(没有正确显示)画
浏览 5提问于2013-08-09得票数 0
回答已采纳
2回答
绝对定位元素按另一个元素的边距移动
css、positioning、margin、absolute
我在页眉和页脚之间有一个内容div (位置:相对)，当我在div周围设置一个边距时，我绝对定位的页眉和页脚从它们的顶部/底部位置移动到该边距的高度(这也发生在我尝试在div中的段落之上和下面设置一个边距时在小提琴，你可以看到，页脚没有连接到底部，即使它是绝对定位(我继续前进，使页眉静态，因为静态给出了预期的结果)。如何将</em
浏览 9提问于2012-07-06得票数 4
回答已采纳
1回答
我的背景覆盖了整个屏幕。黑线是视口的尽头。顶部(黄色)也使用绝对位置.为什么？好的，我想让中档(红色)垂直覆盖屏幕。而且只有一半应该是可见的-需要滚动才能看到它。
所有操作都很好，但是我如何将页脚-div(黄色)定位在中间div(红色)下面呢？黄色页脚的CSS
浏览 3提问于2013-12-19得票数 0
回答已采纳
1回答
CSS div使用定位为绝对的内容展开。
javascript、jquery、html、css
我有一些困难，使父div扩展其内容定位为绝对。
我只是想知道是有办法绕开这条路，还是用一点方法让东西恢复原状，但要保持绝对的定位。
浏览 3提问于2015-07-29得票数 0
回答已采纳
3回答
将div垂直对中位于绝对位置div的顶部。
javascript、jquery、html、css
现在我有一个网站的主体内容部分。在这个主体内容部分，有一个元素绝对定位在底部，在它和页脚之间有一点空间。现在，我已经尝试了很多，并且用尽了我的思考能力，试图让我身体内容的另一部分垂直地集中在绝对定位的底部元素和屏幕顶部之间(在这个例子中，身体部分的顶部，因为也有一个标题)。如果我使用表格单元格执行垂直对齐方法，那么问题是我的height : 10
浏览 0提问于2014-02-15得票数 0
回答已采纳
6回答
未知高度的CSS粘性脚
css、sticky-footer
是否有任何方法将页脚贴在浏览器屏幕底部或内容(取决于哪个更长)使用CSS后，而事先不知道页脚的大小？现在，我在容器中使用绝对定位，该容器容纳页脚和内容，容器的最小高度为100%，但如果更改页脚，我发现必须更改容器底部的填充，以匹配其高度。
浏览 1提问于2010-12-03得票数 35
回答已采纳
3回答
如何在Bootstrap中创建非粘性页脚？
css、twitter-bootstrap
如何生成跨越整个屏幕宽度(不考虑屏幕分辨率)并停留在页面底部的页脚？
当我搜索它时，我得到的是人们提供粘性页脚(与页面一起悬停的页脚)的代码，并告诉我使用绝对定位(我听到的是no no)。我所指的一个完美的例子是twitter bootstrap引用的一个网站()。在该站点上，页脚(看起来像一个英雄单位之类<e
浏览 5提问于2013-07-16得票数 7
2回答
我有一个页脚在我的网页底部运行。如果用户正在桌面上查看页面，那么页脚需要将position:fixed;放在屏幕底部。然而，根据我的UX规范，当在电话或其他小屏幕(宽度小于768 UX)上查看时，页脚必须是
如果内容比屏幕长(高)，则绝对定位在页面底
浏览 7提问于2015-04-28得票数 3
回答已采纳
4回答
css html页脚
html、css、footer
我正在重写这个问题，以更好地表达问题：
屏幕上:我只想让页脚出现在内容下面.简单..。PDF:我希望在内容的最后一页底部显示页脚。
打印:如前所述，我希望在内容的最后一页底部显示页脚。问题是:如果我为媒体type=print设置绝对定位，有两
浏览 6提问于2010-07-28得票数 0
5回答
以上无重叠div的绝对定位
css、html、position、absolute
我有一个div，我希望定位在网页底部。我可以使用position:absolute实现这一点。但是，当窗口变小时，我不希望它与上面的div重叠。这是通过将其更改为position:relative来实现的，但正如预期的那样，它不会停留在页面底部更大的屏幕上。background-repeat:repeat-x; width:100%;
我刚才解释的一
浏览 15提问于2013-10-16得票数 3
回答已采纳
6回答
为什么我的页脚和页面一起滚动？
html、css
好的，我是在做我的个人网站，我编码它已经几天了，我是一个初学者，我不知道为什么我的#footer是随着我的网页滚动。这是一个问题，因为它停留在中间，而不是在我的网站底部。<!#333333;} height: 1000px;}
为了使我的问题更清楚，我已经附上了我的网站下面的截图，请检查一
浏览 4提问于2014-09-02得票数 0
回答已采纳
2回答
如何在底部设置页脚，并随着内容的增加而向下推？
html、css、footer
我想设计一个页脚，使它应该在网页底部，当有较少的内容在身体和应该向下推，如果身体的内容到达页脚。
浏览 0提问于2016-01-07得票数 3
回答已采纳
2回答
在本例中，如何将页脚强制放到底部？
html、css、twitter-bootstrap
即使没有足够的页面内容将#footer推到页面底部，我如何才能将#footer强制到页面底部呢？
请留下一个例子，提前谢谢你
浏览 14提问于2018-01-17得票数 0
3回答
绝对DIV元素的相对页脚
css、wordpress-theming
我正在创建一个wordpress主题，其中页眉和导航栏是绝对定位的，而页脚需要根据每页内容的高度进行相对定位。但是，当我尝试将页脚的位置设置为relative时，它会出现在页面顶部的内容下面。所有元素都在一个相对定位的容器中。有没有办法解决这个问题，或者动态获取内容的高度加上标题和导航栏？</div>
<div id="footer&q
浏览 0提问于2010-04-19得票数 1
回答已采纳
2回答
页面页脚随着jQuery DOM操作(添加/删除等)的内容更改而在视图中上下弹出
jquery、html、css
我的页面动态生成大量信息，并使用jQuery在DOM中添加/删除、显示/隐藏内容。 <div id="content"/> </body>理想情况下，如果不向下滚动，用户将永远看不到页脚</
浏览 3提问于2010-12-05得票数 1
2回答
将元素保存在页面底部
html、css
如何将元素保存在页面底部？示例：
在本例中，尽管有任何浏览器大小，页脚div仍然位于页面底部。这并不是将它保存在页面底部，而是保存在浏览器窗口的底部：。
浏览 5提问于2014-08-08得票数 0
14回答
使用react本机中的flex将一个项目固定在底部。
css、react-native、flexbox、react-native-flexbox
styles.nextBtnText}>Next</Text> </TouchableOpacity></View>
我想用页脚的样式使视图定位在屏幕的底部我尝试将alignSelf属性赋予页脚，但它没有在底部定位，而是将其定位</
浏览 19提问于2016-08-11得票数 98
回答已采纳
1回答
如果没有动态内容的空间，是否可以生成新的父元素？
javascript、html、css、handlebars.js
我已经拥有的有些页面是静态的，有些是动态的。当我在页面上有太多内容时，<section>正在扩展它的高度，但在打印模式下，它会将足够好的内容插入到
浏览 3提问于2021-05-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
