我正在努力做到这一点，以使我的网站的页脚始终位于网页底部。无论网页内容太小而无法占据整个屏幕，还是内容太多以至于您需要滚动页脚，都应始终位于屏幕底部...例如，我已经以下代码可帮助演示该问题...
问题是，尽管只有一个“占位符” div，但页脚只是被推到了它的下方（应该在页面的最底部，就像所有占位符都未注释时会发生的情况一样。）
我该如何实现？
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}<html>
<head>
</head>
<body>
<div class='Header'>Header</div>
<div class="MainContainer">
<div class='Placeholder'></div>
<!-- Uncomment these to populate the container.
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
!-->
</div>
<div class="MyFooter">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
</html>
答案 0 :(得分：0)
您需要调整身体高度。尝试将0/5 8-17 * * 1-5添加到import argparse
from apscheduler.schedulers.background import BackgroundScheduler
import datetime
import time
cmdline_parser = argparse.ArgumentParser(description='Testing')
cmdline_parser.add_argument('--interval', type=int, default=5)
def task():
now = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S.%f')
print(f'{now}')
if __name__=='__main__':
args = cmdline_parser.parse_args()
sched = BackgroundScheduler(timezone='EST')
sched.start()
minutes_interval = f'0/{args.interval}'
sched.add_job(task, trigger='cron', day_of_week='mon-fri', hour='8-17', minute=minutes_interval)
while True:
time.sleep(30)
CSS类中。
答案 1 :(得分：0)
您只需添加
html, body{
height: 100%;
}
那应该解决问题
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
}
html, body{
height: 100%;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}<html>
<head>
</head>
<body>
<div class='Header'>Header</div>
<div class="MainContainer">
<div class='Placeholder'></div>
<!-- Uncomment these to populate the container.
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
!-->
</div>
<div class="MyFooter">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
</html>
答案 2 :(得分：0)
固定页脚使用position: fixed
这是一个例子
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}<html>
<head>
</head>
<body>
<div class='Header'>Header</div>
<div class="MainContainer">
<div class='Placeholder'></div>
<!-- Uncomment these to populate the container.
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
!-->
</div>
<div class="MyFooter">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
</html>
答案 3 :(得分：0)
您唯一需要更改的就是头寸的价值。您所寻找的正确位置是位置：固定
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
footer {
background-color: red;
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
}<html>
<head>
</head>
<body>
<div class='Header'>Header</div>
<div class="MainContainer">
<div class='Placeholder'></div>
<!-- Uncomment these to populate the container.
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
!-->
</div>
<footer>
This is my footer, it should always be at the bottom of the page.
</footer>
</body>
</html>
答案 4 :(得分：0)
答案 5 :(得分：0)
您可以使用bottom: 0和bottom: auto来解决此问题。
但是首先，应将主体的高度设置为100％，以便在有一个“占位符”的情况下页脚可以停留在页面底部。
下面是代码，其中只有一个“占位符”：（bottom: 0px;）
let h = window.innerHeight;
var x = document.getElementsByTagName("BODY")[0];
x.style = "height: " + h + "px;";
window.addEventListener('resize', function(event){
x = document.getElementsByTagName("BODY")[0];
h = window.innerHeight;
x.style = "height: " + h + "px;";
});
if(document.getElementById('main').offsetHeight > h) {
document.getElementById('footer').style = "bottom: auto;";
}* {
margin: 0;
padding: 0;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0px;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}<body>
<div class='Header'>Header</div>
<div class="MainContainer" id="main">
<div class='Placeholder'></div>
</div>
<div class="MyFooter" id="footer">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
下面是带有所有“占位符”的代码：（bottom: auto;）
let h = window.innerHeight;
var x = document.getElementsByTagName("BODY")[0];
x.style = "height: " + h + "px;";
window.addEventListener('resize', function(event){
x = document.getElementsByTagName("BODY")[0];
h = window.innerHeight;
x.style = "height: " + h + "px;";
});
if(document.getElementById('main').offsetHeight > h) {
document.getElementById('footer').style = "bottom: auto;";
}* {
margin: 0;
padding: 0;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0px;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}<body>
<div class='Header'>Header</div>
<div class="MainContainer" id="main">
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
</div>
<div class="MyFooter" id="footer">
This is my footer, it should always be at the bottom of the page.
</div>
</body>