控制與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頁腳

回答

相關問題