创建全屏 iframe - 左侧有空间用于导航答案

【问题标题】：Create Full Screen Iframe - WITH Space On Left For Navigation创建全屏 iframe - 左侧有空间用于导航
【发布时间】：2015-04-28 15:50:25
【问题描述】：

所以我有一个位于页面左侧的具有全局导航的应用程序。单击此导航会更新填充页面其余部分的<iframe>。

我能够让<iframe> 填满页面，但是在左侧添加这个 160 像素的边距是很困难的。我尝试设置left:160px、margin-left:160px、padding-left:160px都无济于事。

关于如何实现这一点的任何想法？下面的代码和小提琴：

  <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 A Fiddle

【问题讨论】：

嗯，这看起来像是在工作..您希望您的导航位于 iframe 内吗？
试试这个：stackoverflow.com/questions/17153310/…
看起来它正在工作，但 NAV 隐藏了 iframe 的 160 像素，这是问题所在。

标签： html css iframe

【解决方案1】：

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;
}

Demo

【讨论】：

这非常有趣。这与各种浏览器的兼容性如何。使用 CSS 的动态宽度……太棒了。

【解决方案3】：

试试这个方法：

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/

【讨论】：

这太接近了！感谢您的帮助，我不得不从 iframe 中删除 position:fixed 并将容器设置为 position:fixed 并带有一些左、右、上、下、属性，并且它起作用了。

【解决方案4】：

如果您希望您的导航位于 iframe 内部，则必须将边距留给 iframe 本身，而不是 #main_iframe

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

UPDATED FIDDLE

你的问题：你可以简单地添加 #main_iframe iframe { padding-left: 160px; } 来定位你想要的 iframe，而不是把它推到右边。

【讨论】：

谢谢，我不确定您为什么要定位 iframe 而不是 ID。我不希望我网站上的所有 iframe 都以这种方式运行。这也将 iframe 推离页面 160px 到右侧。
酷，是的，将 iFrame 包装在 <div> 中是关键。感谢您的帮助。