CSS使页面页脚保持在页面底部的最小高度,但不与页面重叠
您好！感谢您的提问。
关于CSS使页面页脚保持在页面底部的最小高度，但不与页面重叠，您可以使用以下CSS代码实现：
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 100px; /* 页脚高度 */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px; /* 页脚高度 */
}在HTML中，您可以使用以下代码：
<div class="wrapper">
<div class="content">
<!-- 页面内容 -->
</div>
<div class="footer">
<!-- 页脚内容 -->
</div>
</div>这样，您就可以实现一个页脚始终保持在页面底部的最小高度，但不与页面重叠。希望这个答案能够帮助到您！
相关·内容
2回答
将元素保存在页面底部
html、css
如何将元素保存在页面底部？示例：
在本例中，尽管有任何浏览器大小，页脚div仍然位于页面底部。这并不是将它保存在页面底部，而是保存在浏览器窗口的底部：。
浏览 5提问于2014-08-08得票数 0
1回答
如何在页面底部有一个粘性页脚，但不与其他元素重叠？
html、css、twitter-bootstrap-3
我想要一个页脚条，它粘在页面的底部，我现在使用的是“位置:固定”，问题是我有一个div，我想占据页脚上方的整个区域，问题是尽管div的底部由于位置:固定而被重叠。当我移除位置:固定，页面需要滚动.有人能给我一个例子，说明如何正确地创建一个页脚，该页脚保持在页面底部而不与元素重叠，并创建一个滚动
浏览 3提问于2017-04-07得票数 0
回答已采纳
37回答
CSS使HTML页脚保持在页面底部的最小高度，但不重叠页面
css、footer
我有下面的页面(死链接：http://www.workingstorage.com/Sample.htm )，它有一个页脚，我不能让它坐在页面的底部。我想让脚
CSS是继承下来的，困
浏览 18提问于2009-03-13得票数 592
回答已采纳
1回答
使用浮动网格模式内容在底部粘贴页脚
css、css-float、grid-layout
我有一个基于网格系统的网站，所以所有的列都向左浮动。 if ( height_diff > 0 ) {});
所有这些尝试都没有给出积极<em
浏览 1提问于2015-04-30得票数 0
回答已采纳
3回答
css页脚的问题
css
我有一个页面，它有一个页眉，一个页脚中间部分，应该增长，以填补页面的其余部分。让我描述一下我想要的布局，header = 100%的页面宽度和固定的高度。content =最小宽度为760像素，最大高度为1000像素，以填充到页面末尾。但是，不能与页脚重叠。页脚应该向下推。如果内容小于100%，页脚</
浏览 1提问于2010-07-09得票数 1
回答已采纳
1回答
HTML页脚在调整窗口大小时更改位置
html、resize、window、footer
我有一个简单的html页面。页眉、内容和页脚。问题是当我调整窗口大小时。空间的高度等于我调整窗口大小的高度。这是因为我将最小高度设置为Contents div。如何在调整窗口大小后使页脚保持在底部？:(请帮助这是网页：
浏览 1提问于2012-01-09得票数 0
1回答
页脚应位于底部并保持在固定位置，即使浏览器调整大小也是如此
javascript、asp.net、css
我有一个有几个按钮的页脚，留在页面底部的高度为60px的页面，无论上面的内容是什么，或者窗口is....that的大小有多大都很好。下面是我使用的CSS：{ height: 100%;}{; /* Height of the footer *&#x
浏览 0提问于2011-06-14得票数 0
6回答
水晶报表页脚打印在页面底部
crystal-reports、report
我有页脚()PF A和B，每当我抑制PFa时，PFb将跟随报告页脚上移。把垂直线想象成行号，|Details|Page Footer APFa仅显示在最后一页中，使用suppress部分中的公式Report Footer |Report Footer| |Page Footer B
现在我希望报告是这样的
浏览 9提问于2012-09-27得票数 5
1回答
宽度为100%的CSS粘性页脚
css、width、footer、sticky
我正在尝试实现一个具有100%宽度的粘性页脚。它应该粘在页面底部，但不要重叠页面内容div。我使用的页面布局与本例相同：
如您所见，页脚的宽度与div#container相同。但是我想把页脚伸展到100%宽，而页面内容保持在中心位置，并在调整浏览器大小时保持高度伸展。我怎么能这么做？
浏览 3提问于2013-09-23得票数 0
回答已采纳
2回答
当页脚位于其他div块内时，出现粘性页脚问题
html、css、footer
我在将页脚粘贴到视口底部时遇到问题。我尝试了不同的方法，在这里阅读页脚主题，阅读stickyfooter网站，尝试，但没有运气，谷歌太多，所以我从我的网站上切下的问题代码可以在那里测试：<html><root></footer></body>我希望扩展主块以适应页脚，
浏览 0提问于2016-03-30得票数 5
2回答
如何将包装器推入粘性页脚？
jquery、html、css、sticky-footer
我想用jQuery做一个粘性的页脚。我需要一些帮助，使我的#wrapper边框线将换行整个页面，直到页脚。
让我知道
浏览 0提问于2011-01-26得票数 1
回答已采纳
7回答
页脚的位置导致与页面的其他部分重叠
html、css、less
首先，我不得不说，我研究了与我相关的主题，但没有解决问题。
我的问题是什么？我使用position : absolute & bottom : 0使页脚固定在页面底部。但除此之外，我还有一组小部件！页脚与它们重叠。我使用float : left使小部件保持在一行中。我试着清除他们的浮点，但不起作用。在这里，我为您提供了特定的代码片段和屏幕
浏览 1提问于2013-03-06得票数 2
4回答
页脚不会停留在页面底部和内容下面
javascript、html、css、reactjs
/> </div>}
我的问题是，对于每个组件，我都有单独的样式表，但是我不能让我的页脚同时位于页面的底部，并且始终保持在内容下面。也就是说，如果页面是空白的，页脚仍然在底部，如果有内容大于视口高度，页脚仍将保
浏览 5提问于2022-06-17得票数 0
回答已采纳
1回答
我的页脚是正常大小的两倍
html、css
我正在尝试将HTML CSS添加到我的Microsoft Sharepoint页面。我两周前开始学习HTML CSS，所以这对我来说是新的。当我向下滚动时，我的脚本使我的页脚包含了大约30%的页面。我希望页脚和页眉的大小一样大。
浏览 13提问于2019-11-20得票数 0
5回答
页脚不粘在底部
html、css、blogs、tumblr
我遇到了问题，我的页脚粘在我的博客整个页面的底部。我遇到了两个问题。首先，如果我使用position:absolute，页脚会上升到博客主页的中间。如果我不去管它，它会粘在博客的底部，但在整个博客页面上却会上升到中间。页脚是我经常遇到的问题。下面是我当前用于页脚的CSS样式text-align: left;
浏览 6提问于2013-01-21得票数 1
2回答
如何制作一个粘性页脚，同时保持包装动态？
javascript、jquery、css、sticky-footer
-时间很大因此，问题是，您如何在保持包装动态的同时，使页脚变得粘稠？
浏览 7提问于2012-10-24得票数 1
回答已采纳
1回答
打印页面中的页脚重叠内容
html、css
我正在尝试写一个很长的HTML页面，当打印时，它包含一个页脚，上面写着“仅供官方使用(FOUO)”。我把它绝对定位在页面的底部，但页面的内容也会下降那么多，或者页脚重叠。我曾尝试设置我的@media print CSS，使页面的主要内容比页面的全高小50像素，但这不起任何作用。这是我的CSS：
浏览 0提问于2017-02-17得票数 5
2回答
页脚问题(CSS和HTML)
html、css
我设法让我的页脚留在底部，但它与我的内容重叠。身体100%的高度似乎不会有帮助，我已经在互联网上寻找解决方案，但没有一个有效。当我调整页面大小时，我的页面页脚要么只停留在底部附近，要么粘在底部并与我的内容重叠。我试着给我的身体一个100%的高度，我的
浏览 2提问于2013-12-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
