控制与javascript内容重叠的css页脚

因此，基本上我想做的是使用javascript获得“主体”的高度和“div class=main container”的高度，然后如果主容器中的内容足够丰富，它会导致“主体”高度大于我想要的“主体”高度位置：fixed；将“.footer节”上的属性更改为位置：相对；这样它就不会与内容重叠，而是在页面末尾“消失”，只有向下滚动时才可见。 我不确定我是否在javascript或CSS中做错了什么，或者两者都做错了

我在这里拼凑了一个JSFIDLE：

以下是javascript：

function resizeFunction() {
var x = document.getElementsByTagName("body").offsetHeight;
var y = document.getElementsByClassName("main-container").offsetHeight;
var z = document.getElementsByClassName("footer-section");
if (x < y) {
    z.className += "responsive";
} else {
    z.className = "footer-section";
}
}

---

有一种更简单的方法，只需使用

minheight

---

有一种更简单的方法，只需使用

最小高度

---

因为你是主容器，所以如果主容器的高度上升，那么身体的高度也会上升

您必须检查主容器的高度与当前窗口的高度

第二个问题是选择元素的方式

var x = document.getElementsByTagName("body").offsetHeight;
var y = document.getElementsByClassName("main-container").offsetHeight;
var z = document.getElementsByClassName("footer-section");

document.getElementsByTagName和document.getElementsByClassName返回满足条件的所有元素的节点列表。玩具不能做。在节点列表上看不清。您将必须创建单个节点

您可以为此使用querySelector

var x = document.querySelector("body").offsetHeight;
var y = document.querySelector(".main-container").offsetHeight;
var z = document.querySelector(".footer-section");

---

小提琴：

因为你是主容器，所以如果主容器的高度上升，那么身体的高度也会上升

您必须检查主容器的高度与当前窗口的高度

第二个问题是选择元素的方式

var x = document.getElementsByTagName("body").offsetHeight;
var y = document.getElementsByClassName("main-container").offsetHeight;
var z = document.getElementsByClassName("footer-section");

document.getElementsByTagName和document.getElementsByClassName返回满足条件的所有元素的节点列表。玩具不能做。在节点列表上看不清。您将必须创建单个节点

您可以为此使用querySelector

var x = document.querySelector("body").offsetHeight;
var y = document.querySelector(".main-container").offsetHeight;
var z = document.querySelector(".footer-section");

---

fiddle:

如果页脚高度不固定且下降到60像素以下，这会有点奇怪。如果页脚高度不固定且下降到60像素以下，这会有点奇怪。谢谢！很高兴发现我在javascript中犯了哪些错误！也谢谢你！很高兴发现我在javascript中犯了哪些错误！