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

【问题标题】：controlling css footer that is overlaping content with javascript控制与 javascript 内容重叠的 css 页脚
【发布时间】：2017-05-12 06:56:19
【问题描述】：

所以，基本上我想要做的是使用 javascript 来获取“body”的高度和“div class=main-container”的高度，然后如果主容器中的内容足够大，它会导致“主容器”高度大于我想要位置的“主体”高度：固定；将“.footer-section”上的属性更改为位置：相对；这样它就不会与内容重叠，而是从页面末尾“消失”，并且仅在您向下滚动时可见。我不确定我是否在 javascript 或 CSS 中做错了什么，或者两者兼而有之？

我在这里拼凑了一个 jsfiddle：https://jsfiddle.net/udsv4t4y/1/

从这里开始是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";
}
}

这是我正在使用的 HTML：

<body onresize="resizeFunction" onload="resizeFunction">

<div class="main-container">
<div class="row"></div>
<div class="col-12">
Lorem ipsum dolor sit amet, (cut out due to length)
</div>
<div class="row"></div>
<div class="col-12">
<div class="footer-section"></div>
</div>
</div>
</body>

和 CSS：

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
font-family: "Tahoma", sans-serif;
font-size: 16px;
color: #454545;
background-color: #fff;
}

.main-container {
min-height: 100%;
width: 100%;
margin: 0;
}

.footer-section {
position: fixed;
bottom: 0;
height: 60px;
width: 100%;
background: #428cd9;
}

.footer-section.responsive {
position: relative;
bottom: 0;
height: 60px;
width: 100%;
background: #428cd9;
}

.row::after {
content: "";
clear: both;
display: block;
}

[class*="col-"] {
float: left;
}

.col-12 {width: 100%;}

【问题讨论】：

标签： javascript html css footer

【解决方案1】：

有一种更简单的方法——只需使用min-height。

https://jsfiddle.net/e8ss46qw/1/

【讨论】：

如果页脚的高度不固定并且下降小于 60 px，这会表现得有点奇怪。

【解决方案2】：

由于您是主容器，因此如果主容器的高度上升，那么主体的高度也会上升。

您必须使用当前窗口高度检查主容器的高度。

第二个问题是方式，你正在选择元素

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

document.getElementsByTagName 和 document.getElementsByClassName 返回满足条件的所有元素的节点列表。玩具不能在节点列表上做 .offsetHeight 。您将不得不加热单个节点。

您可以为此使用 querySelector。

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

小提琴：https://jsfiddle.net/k3qgc88j/

【讨论】：

也谢谢你！很高兴找出我在 javascript 中犯了什么错误！