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

Question

所以，基本上我想做的是使用 javascript 获取 "body" 的高度和 "div class=main-container" 的高度，然后如果主容器中的内容是足够大以至于它导致 "main container" 高度大于 "body" 高度我想要 Position: fixed; 属性将“.footer-section”更改为 position: relative;这样它就不会与内容重叠，而是 "disappears" 离开页面末尾，并且仅在您向下滚动时可见。我不确定我是否在 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%;}

Answer 1

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

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

Answer 2

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

您必须检查主容器的高度，当前高度为 window。

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

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

document.getElementsByTagName和document.getElementsByClassNamereturn所有满足条件的元素的节点列表。玩具不能在节点列表上执行 .offsetHeight。您将不得不 het 单个节点。

您可以为此使用 querySelector。

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

fiddle: https://jsfiddle.net/k3qgc88j/

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

controlling css footer that is overlaping content with javascript

html

javascript

css

footer