【发布时间】：2018-01-09 17:29:36
【问题描述】：
我正在尝试在网站底部制作三个带有类块的 div，使其具有相同的高度。我用过javascript。它有效，但我的页脚被弄乱了，它的大小在整个内容区域的后面。你能帮帮我吗？
我的网站：http://www.martinpodlesak.com/test4/
我的代码在这里，因为我不知道问题到底出在哪里，我正在输入整个代码。它是 WP 4.8 网站
<?php
/**
* @package elicit
*/
get_header(); ?>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides {display:none}
</style>
<body>
<div class="w3-content" style="max-width:800px">
<img class="mySlides" src="http://martinpodlesak.com/wp-content/uploads/2017/08/Forman.png" style="width:100%">
<img class="mySlides" src="#" style="width:100%">
<img class="mySlides" src="http://martinpodlesak.com/wp-content/uploads/2017/08/Dragoun.png" style="width:100%">
<img class="mySlides" src="#" style="width:100%">
<img class="mySlides" src="http://martinpodlesak.com/wp-content/uploads/2017/08/Hozák.png" style="width:100%">
<img class="mySlides" src="http://martinpodlesak.com/wp-content/uploads/2017/08/Kubát.png" style="width:100%">
</div>
<div class="w3-center">
<!-- <div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">? Prev</button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ?</button>
</div>-->
<button class="w3-button demo" onclick="currentDiv(1)">Forman</button>
<button class="w3-button demo" onclick="currentDiv(2)">Dietz</button>
<button class="w3-button demo" onclick="currentDiv(3)">Dragoun</button>
<button class="w3-button demo" onclick="currentDiv(4)">Pohl</button>
<button class="w3-button demo" onclick="currentDiv(5)">Hozák</button>
<button class="w3-button demo" onclick="currentDiv(6)">Kubát</button>
</div>
<div class="blocks">
<div class="block js-equal-height">
<h2>Agentura Martina Podleďešáka</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vestibulum justo nibh, pharetra vitae commodo eget, hendrerit sed velit.</p>
<p>Vestibulum sapien orci, aliquet rhoncus lacus ac, rutrum laoreet nunc. </p>
<p> Mauris viverra luctus volutpat. Praesent erat sem, luctus ac ornare ut, molestie eu quam.</p>
</div>
<div class="block js-equal-height">
<h2>Co děláme?</h2>
<p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Ăšloha 1</a><p></p></button></p>
<p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Ăšloha 2</a><p></p></button></p>
<p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Ăšloha 3</a><p></p></button></p>
<p></p>
</div>
<div class="block js-equal-height">
<a class="twitter-timeline" data-lang="cs" data-width="315" data-height="300" href="https://twitter.com/podlesakmartin">Tweets by podlesakmartin</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<?php get_footer(); ?>
<script>
function heightsEqualizer(selector) {
var elements = document.querySelectorAll(selector),
max_height = 0,
len = 0,
i;
if ( (elements) && (elements.length > 0) ) {
len = elements.length;
for (i = 0; i < len; i++) { // get max height
elements[i].style.height = ''; // reset height attr
if (elements[i].clientHeight > max_height) {
max_height = elements[i].clientHeight;
}
}
for (i = 0; i < len; i++) { // set max height to all elements
elements[i].style.height = max_height + 'px';
}
}
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
heightsEqualizer('.js-equal-height');
});
window.addEventListener('resize', function(){
heightsEqualizer('.js-equal-height');
});
}
setTimeout(function () { // set 1 second timeout for having all fonts loaded
heightsEqualizer('.js-equal-height');
}, 1000);
//slider
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-red";
}
</script>
</body>
</html>
【问题讨论】：
-
请发布您的代码
-
我们还需要你的css代码。
-
@hairmot 在这里我们使用代码
-
@Remy 整个网站？这有点太长了......
标签： javascript html css debugging footer