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

所以，基本上我想要做的就是使用JavaScript来获取“身体”的高度和“div class = main-container”的高度，那么如果内容在主容器足够大，它使得“主容器”的高度大于我想要的位置：固定的“主体”高度; “.footer-section”中的属性改为position：relative;因此它不会与内容重叠，而是会在页面末尾“消失”，并且只有在向下滚动时才可见。我不知道如果我在JavaScript或CSS或两者都做错了什么？控制与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%;}

来源

2016-12-28 Daniel

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

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

来源

2016-12-28 02:28:29 Quinn

啊！完美的作品！：）太感谢了。 – Daniel

如果页脚的高度不固定，并且下降小于60像素，这将表现出有点奇怪。 – Deep

既然你是主容器是因此，如果主容器的高度上升，从而将车身的高度体内。

您将不得不用主窗口的当前高度检查主容器的高度。

的第二个问题是这样的，你是选择元素

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/

来源

2016-12-28 02:37:25 Deep

也谢谢你！很好找出我在javascript中犯的错误！ – Daniel

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

回答

相关问题