контроль нижнего колонтитула css, который является перекрывающимся контентом с помощью javascript

поэтому, в основном, что я хочу сделать, это использовать javascript, чтобы получить высоту «body» и высоту «div class = main-container», а затем, если содержимое в основной контейнер достаточно велик, что он приводит к тому, что высота «основного контейнера» больше, чем высота «тела». Я хочу, чтобы положение: зафиксировано; свойство в разделе «.footer-section» должно быть изменено на позицию: relative; так что он не перекрывает контент, а скорее «исчезает» с конца страницы и отображается только при прокрутке вниз. Я не уверен, что я делаю что-то неправильно в javascript или CSS или, возможно, оба?контроль нижнего колонтитула css, который является перекрывающимся контентом с помощью javascript

я бросил вместе 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

контроль нижнего колонтитула css, который является перекрывающимся контентом с помощью javascript

ответ

Смежные вопросы