Je veux obtenir la hauteur d'un div afin de faire correspondre la hauteur d'un autre div. J'ai utilisé la méthode clientHeight, mais cela ne me renvoie pas la bonne valeur (valeur plus petite). En fait, il semble retourner une hauteur avant que tous les éléments ne soient chargés. Après quelques recherches en ligne, j'ai essayé de mettre un window.load () pour retarder jusqu'à ce que tout soit chargé mais cela ne fonctionne pas aussi bien. Quelques idées ?

mounted () {
  this.matchHeight()
},
matchHeight () {
  let height = document.getElementById('info-box').clientHeight
}
<div class="columns">
  <div class="left-column" id="context">
  <p>Some text</p>
  </div>
  <div class="right-column" id="info-box">
    <img />
    <ul>
      some list
    </ul>
  </div>
</div>
33
Juliane Blier 6 juil. 2017 à 15:19

2 réponses

Meilleure réponse

La façon dont vous le faites est très bien. Mais il existe une autre manière spécifique à la vue via un attribut ref.

 mounted () {
   this.matchHeight()
 },
 matchHeight () {
   let height = this.$refs.infoBox.clientHeight;
 }


    <div class="columns">
        <div class="left-column" id="context">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"></>
            <img />
            <ul>
                some list
            </ul>
        </div>
    </div>

Dans ce cas, puisque vous obtenez juste la valeur, peu importe que vous utilisiez votre approche getElementById originale ou l'approche ref spécifique à la vue. Cependant, si vous définissez la valeur sur l'élément, il est préférable d'utiliser l'approche ref pour que vue comprenne que la valeur a changé et ne remplacera pas la valeur par la valeur d'origine si elle a besoin de la mettre à jour. node dans le DOM.

Vous pouvez en savoir plus ici: https://vuejs.org/v2/api/#vm-refs

Mettre à jour

Quelques personnes avaient laissé des commentaires indiquant que la solution ci-dessus ne fonctionnait pas pour eux. Cette solution a fourni les concepts mais pas le code de travail complet à titre d'exemple, j'ai donc augmenté ma réponse avec le code ci-dessous qui montre les concepts.

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            leftColStyles: { },
            lines: ['one', 'two','three']
        }
    },
    methods: {
        matchHeight() {
            var heightString = this.$refs.infoBox.clientHeight + 'px';
            Vue.set(this.leftColStyles, 'height', heightString); 
        }
    },
    mounted() {
        this.matchHeight();
    }

});
.columns{width:300px}
.left-column {float:left; width:200px; border:solid 1px black}
.right-column {float:right; border:solid 1px blue; }
<div id="app">
    <div class="columns">
        <div class="left-column" id="context" v-bind:style="leftColStyles">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"> 
            <img />
            <ul>
                <li v-for="line in lines" v-text="line"></li>
            </ul>
        </div>
    </div>

</div>

 <script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"></script>
 

Voici une capture d'écran des résultats dans le navigateur:

enter image description here

36
gman 1 févr. 2018 à 05:21

J'utiliserais flexbox pour obtenir des colonnes de hauteur égale https://css-tricks.com/snippets/css/a -guide-à-flexbox /

.container {
   display: flex;
}
.column {
   border: 1px solid;
   padding: 20px;
   width: 150px;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="container">
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
            sit amet ornare fringilla, ligula quam faucibus urna
        </div>
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</body>
</html>
3
Cata John 18 avril 2018 à 08:17