iFrame Modifiers

CSS Style Overview

The height that you set will not guarentee that you won't see double scroll bars if the content within the iframe is longer than the iframe.  

Window within a window

Using an iframe should be used in limited situations it is still best to link to the content directly since the iframe will have different navigation structure from the parent window.    We recommend that you make your iframe tall enough to avoid scrolling where possible. 

Height modifier

  • iframe_500px
  • iframe_600px
  • iframe_700px
  • ...  increments 100px per use through 2000px
  • iframe_2000px
  • iframe_2500px
  • iframe_3000px
  • iframe_3500px
  • iframe_4000px
  • iframe_4500px
  • iframe_5000px

Height Example iframe_500px


Think About Content Sizing

Responsive design means pages adapt to the device which displays them.  An iframe will be sized to fit any of the editable sections within the Campus templates.  If you have a small editable zone an iframe may display a page using a responsive layout. 

Remember to check your pages on both a mobile device and a regular desktop monitor so you can decide if that is the right way to handle your content.


Double Scroll bars

When using iframes and specifying a height you may find that the main page your working on has a scroll bar and the iframe has its own scroll bar as well.  This indicates that the iframe is not tall enough to fill the contents and it will auto scroll.  

You should increase the size of the iframe using a larger frame size, or adjust the layout of the page so your iframe is in an editable zone with more width.  This will help any wrapping text.  Again try your page on a mobile device and make sure your happy with the layout.

Height Example iframe_2000px