So, I'm importing an iframe from a static site and I'm having difficulty adjusting the height. (The site is at www.lightchan.org/blog/first). I don't know how to set the container's height to the height of the content of the iframe and I don't even know if that's even possible with the way that I'm doing it.

Here's the code:

 <div id='blog' style=''>
  <div id='leftcontainer' style=''>
    <div v-bind:style="{ position: 'relative', paddingLeft: '25vw', width: '100vw', overflowY: 'scroll', overflowX: 'hidden', height: containerheight }"> 
      <iframe v-bind="{ src: blogurl }"
                 allowfullscreen
                 frameborder="0" border="0" cellspacing="0" scrolling='no'
                 :style="{ position:'absolute',top:'0px',width:'100%',height:containerheight }"></iframe>
    </div>
  </div>
 </div>
</template>

<style scoped>
html, body{
  width: calc(100% - 20px);
  overflow-x: hidden;
  position:relative;
}
#dblog{
  margin: 20px;
}
#leftcontainer{
  display: inline-block;
  float: left;
}
#rightcontainer{
  display: inline-block;
  float: right;
}
</style>

<script scoped>
    import app from '../App.vue'
    export default{
        components:{
            app
        }, 
        data(){
          return{
            blogurl: 'https://lightchan.neocities.org', 
            containerheight: ''
          }
        }, 
        created(){
          console.log('value of this.$routes.blogname', this.$route);
          this.blogurl = 'https://lightchan.neocities.org' + this.$route.path + '.html'
          console.log('value of this.blogurl: ', this.blogurl)
          if(this.$route.path=='/blog/first'){
            this.containerheight = '150vh';
          }
        }
    }
</script>

It's not a big deal. It just looks a little funky unless I finagle with it on every blog post by setting the height on load. And then it's not super responsive when the page is resized. Just a thing. Anyway any help etc etc. This one isn't super important so I'll check back in a while. Thanks.