Geek Answers Handbook

Creating a fullscreen iframe - with space left for navigation

So, I have an application with global navigation, which is on the left side of the page. Tapping this navigation updates <iframe>which fills the rest of the page.

I managed to get <iframe>to fill the page, but adding this field to 160 pixels to the left is difficult. I tried to install left:160px, margin-left:160px, padding-left:160pxall to no avail.

Any ideas on how I can do this? Code and script below:

  <nav>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
    </ul>
  </nav>

  <iframe src="http://cnn.com" frameborder="0" name="product_iframe" id="main_iframe" height="100%" width="100%"></iframe>

  <style type="text/css">
    #main_iframe {position:fixed;height:100%;width:100%;top:0px;left:0px;right:0px;bottom:0px; z-index:1}
    nav {position:fixed; left:0px; top:0px; bottom:0px; width:160px; background:#333; color:#fff; z-index:2}
  </style>

Here is the fiddle

+4
source share
4 answers

iframe , width="100%" , width-minus-160px.

: http://jsfiddle.net/x2jm7xcz/7/

iframe 100% / .

+2

iframe,

#main_iframe {
  position: fixed;
  height: 100vh;
  top: 0px;
  left: 160px;
  width: -webkit-calc(100vw - 160px);
  width: calc(100vw - 160px);
  bottom: 0px;
  z-index: 1;
}

+1

:

HTML:

<div id="nav">
    <ul>
        <li>Item1</li>
        <li>Item2</li>
    </ul>
</div>
<div id="main">      
<iframe src="http://cnn.com" frameborder="0" name="product_iframe" id="main_iframe"></iframe>
</div>

CSS

#nav {
    float:left;
    width:160px;
    background:#333; 
    color:#fff; 
    position:fixed; 
    top:0px; 
    bottom:0px; 
}

#main {
    margin-left: 165px;
    height:100%;
}
#main iframe{
    width:100%;
    height:100%;
    position:fixed; 
}

https://jsfiddle.net/robgir/chcxj746/

+1

, iframe, iframe, #main_iframe

#main_iframe iframe {
   padding-left: 160px;   
}

FIDDLE

: #main_iframe iframe { padding-left: 160px; }, iframe, .

0

More articles:


All Articles