首页猿问使页脚始终位于底部

使页脚始终位于底部

Html5

PIPIONE 2023-10-17 15:12:56

我正在努力使我的网站的页脚始终位于网页的底部。无论网页内容太小而无法占据整个屏幕，还是内容太多需要滚动，页脚都应该始终位于屏幕底部......例如......我已经做了以下代码可帮助演示该问题...问题是，虽然只有一个“占位符”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>  </div> <div class="MyFooter"> This is my footer, it should always be at the bottom of the page. </div> </body></html>

查看完整描述

5 回答

呼如林

TA贡献1798条经验获得超3个赞

您需要添加的是

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>

<!-- Uncomment these to populate the container.

!-->

</div>

This is my footer, it should always be at the bottom of the page.

</div>

</body>

</html>

反对回复 2023-10-17

慕后森

TA贡献1802条经验获得超5个赞

你唯一需要改变的是这个职位的价值。您正在寻找的正确位置是：固定

* {

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>

<!-- Uncomment these to populate the container.

!-->

</div>

This is my footer, it should always be at the bottom of the page.

</footer>

</body>

</html>

反对回复 2023-10-17

陪伴而非守候

TA贡献1757条经验获得超8个赞

固定页脚使用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>

<!-- Uncomment these to populate the container.

!-->

</div>

This is my footer, it should always be at the bottom of the page.

</div>

</body>

</html>

反对回复 2023-10-17

鸿蒙传说

TA贡献1865条经验获得超7个赞

我建议你去读一下元素的位置。一切顺利。一个很小的更改可以在这里帮助您，只需更改MyFooter类的位置即可。IE

.MyFooter {
   position: fixed;
}

反对回复 2023-10-17

九州编程

TA贡献1785条经验获得超4个赞

您可以使用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>

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>

This is my footer, it should always be at the bottom of the page.

</div>

</body>

反对回复 2023-10-17

5 回答
0 关注
87 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

使页脚始终位于底部

使页脚始终位于底部

5 回答

添加回答