Question

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

我能够让<iframe>填满页面，但在左边添加这个160px的边距证明是困难的。我尝试设置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

Answer 1

iframe可能会很棘手，width="100%"会有问题，因为你真正想要的是宽度减去160px。

在您的情况下，在其周围包裹另一个元素以处理左侧定位将完成这项工作：http://jsfiddle.net/x2jm7xcz/7/

iframe元素可以是其父级的100％高度/宽度。

Answer 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

Answer 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/

Answer 4

如果您希望导航在内部 iframe，则必须为iframe本身提供边距，而不是#main_iframe

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

UPDATED FIDDLE

您的问题：您只需添加#main_iframe iframe { padding-left: 160px; }即可定位您想要的iframe，而不是将其推向右侧。

创建全屏幕iframe - 左侧空间用于导航

4 个答案: