Question

我正在尝试在网站底部制作三个带有类块的div，以获得相同的高度。我用过javascript。它有效，但我的页脚得到了kriffed，它的大小落后于整个内容区域。你能帮我吗？

我的网站：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>

Answer 1

我为类.blocks

使用了flexbox

.blocks {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.block {
  width: calc(100% / 3);
  background: lightblue;
  border: thin solid darkgray;
}

<div class="blocks">
  <div class="block">
    <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">
    <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"><a class="twitter-timeline" data-lang="cs" data-width="315" data-height="300" href="https://twitter.com/podlesakmartin">Tweets by podlesakmartin</a></div>
</div>

Answer 2

根据您需要支持的浏览器，您可以避免将JS用于相等高度的列，而是使用flexbox。 E.g。

.blocks {
    display: flex;
    align-items: stretch;
}

调试网站，页脚生气了

2 个答案: