Question

所以，基本上我想要做的是使用javascript来获得＆＃34; body＆＃34;的高度。＆＃34; div class = main-container＆＃34;的高度然后，如果主容器中的内容足够大，它会导致主容器＆＃34;高度大于＆＃34;身体＆＃34;身高我想要的位置：固定; ＆＃34; .footer-section＆＃34;被改为职位：亲属;所以它不会与内容重叠，而是＃34;消失＆＃34;在页面末尾，只有在向下滚动时才可见。我不确定我在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

因为你是主体内的主要容器所以如果主容器的高度上升那么身体的高度也是如此。

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

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

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重叠内容的css页脚

2 个答案: