Javascript 调试网站，页脚发疯了
我试图使三个div与类块在网站底部有相同的高度。我使用了javascript。它可以工作，但是我的页脚被克里夫化了，它的大小在整个内容区域后面。你能帮帮我吗 我的网站： 我的代码在这里，因为我不知道问题到底出在哪里，我把整个代码都放进去了。这是WP 4.8网站Javascript 调试网站，页脚发疯了,javascript,html,css,debugging,footer,Javascript,Html,Css,Debugging,Footer,我试图使三个div与类块在网站底部有相同的高度。我使用了javascript。它可以工作，但是我的页脚被克里夫化了，它的大小在整个内容区域后面。你能帮帮我吗 我的网站： 我的代码在这里，因为我不知道问题到底出在哪里，我把整个代码都放进去了。这是WP 4.8网站 <?php /** * @package elicit */ get_header(); ?> <!DOCTYPE html> <html> <title>W3.CS
<?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>
W3.CSS
.mySlides{display:none}
福尔曼
迪茨
德拉贡
波尔
霍兹切克
库布切特
马丁娜·波德尔卡酒店
Lorem ipsum dolor sit amet，是一位杰出的献身者
前庭只有尼布，法雷特拉·维塔·康莫多·埃吉特，亨德雷特·塞德·维利特
虎耳草前庭、虎耳草前庭、虎耳草前庭
毛里斯·维韦拉·卢库斯·帕特。Praesent erat sem、luctus ac ornare ut、molestie eu quam
是我吗？
功能高度Sequalizer（选择器）{
var elements=document.queryselectoral（选择器），
最大高度=0，
len=0，
我
如果（（elements）和（&（elements.length>0））{
len=元素长度；
对于（i=0；imax_高度）{
最大高度=元素[i]。clientHeight；
}
}
对于（i=0；ix.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i 中使用了flexbox。blocks.blocks{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
.街区{
宽度：计算值（100%/3）；
背景：浅蓝色；
边框：薄实线；
}
马丁娜·波德尔卡酒店
Lorem ipsum dolor sit amet，是一位杰出的献身者
前庭只有尼布，法雷特拉·维塔·康莫多·埃吉特，亨德雷特·塞德·维利特
虎耳草前庭、虎耳草前庭、虎耳草前庭
毛里斯·维韦拉·卢库斯·帕特。Praesent erat sem、luctus ac ornare ut、molestie eu quam
是我吗？
请发布您的代码。我们还需要您的css代码。@hairmot我们一起发布code@Remy整个网站是什么？这将是一种太长的……这是一个响应的解决方案，如果我认为块将是30%宽度@ Rob HowellsThanks人，使用这个解决方案。这比像我一样使用JS要好得多。唯一的问题是，我必须在以后的媒体查询中再添加一行@杰拉德
.blocks {
display: flex;
align-items: stretch;
}