0

this is how it should look but when I paste the same code:

    <!-- dummy div -->
    <div style="height:100px;">
    </div>

    <!-- outer div to contain inner div (that has a margin) -->
    <div style="height:80vh;">

   <!-- inner most div now has its boundary defined by the outer div, so adding a border wont extend its width beyond the width of the browser window -->
   <div style="height:80vh; padding: 20px;">

   <!-- iframe set to fill 100% of its containing div -->
   <iframe src="http://insitu-app.com/insitu-tgrg-simplified.html" style="top:0; left:0; height: 100%; width: 100%; margin-left: auto; margin-right: auto; border: none" frameborder="0" allowfullscreen></iframe>

  </div>

  </div>

into the wordpress code editor and publish, this is what I get . I want the div tag and its contents to take up 80% of the viewports vertical height. If this method isn't possible on wordpress and they're is an alternative please tell me? Many Thanks

edward
  • 55
  • 6
  • adding `80vh` div with `padding` inside another `80vh` div is not a good idea. Either change the height of inner div to `100%` and add `box-sizing: border-box;` or remove height from parent div. – Akash K. Sep 15 '15 at 12:04
  • thanks the inner div now is: `
    ` let me know if not ok
     – edward Sep 15 '15 at 12:20

1 Answers1

0

Check the code in TEXT VIEW of content editor. Wordpress content editor generates some tags when you paste content in it. Paste the same using TEXT VIEW and make sure no other text is there. It'll work fine.

In your current case extra <code>..</code> and <p>...</p> tags are being generated.

Akash K.
  • 627
  • 1
  • 14
  • 27
  • Hi, apologies but [it is in the TEXT VIEW](http://imgur.com/VM8u81m). I removed the .. tags too, but still no change – edward Sep 15 '15 at 12:10
  • Check the output markup on the page. Its still generating `

    ..

    ` tags around the content. around each comment you've pasted and around `` tag thats limiting its height.     – Akash K. Sep 15 '15 at 12:19
  • and please remove `height: 80vh;` from outer div – Akash K. Sep 15 '15 at 12:21
  • Akash K., within the inner div I've replaced `height: 80vh;` with `height: 100%;` but ive left the outer div as `height: 80vh;` because I need it to be 80% of screen height. Is this ok, recommended? – edward Sep 15 '15 at 12:36
  • yes. its good. One more thing height unit `vh` is still not supported by all browsers. You should research about that if you want your website to work on all browsers. :) – Akash K. Sep 15 '15 at 12:38
  • cool its working now - thanks. I will do some research, are you talking about before IE 9 or is it worse than that? – edward Sep 15 '15 at 12:44
  • Please refer to this [link](http://stackoverflow.com/questions/21624014/css-are-view-height-vh-and-view-width-vw-units-widely-supported) or [caniuse](http://caniuse.com/#feat=viewport-units) – Akash K. Sep 15 '15 at 12:48