Question

我正在尝试创建一些工具栏位于设置为100％高度的div的顶部，侧面和底部。在div里面将是一个iframe，它也需要有100％的高度。

我可以获得顶部工具栏和侧边栏工具栏，但无法使主要内容div / iframe和页脚正常工作。工具栏必须包含主内容div / iframe，并且所有3个都可以隐藏，因此主要内容div / iframe必须能够扩展以填充该空间。

问题是viewerContainer和footerToolbar div。无论工具栏是否存在，viewerContainer都需要填充页面：

    <div id="viewerContainer" style="position:static;top:0;left:0;height: ??%;">
      <div id="viewer_wrapper" style="width: 100%;height: 100%;">
        <iframe id="viewer_control" name="viewer_control" frameborder="5" style="position: relative;top: 0;left: 0;width: 100%;height: 100%;">
        </iframe>
      </div> 
    </div>
    <div id="footerToolbar" class=" form-group " style="background:orange;width:100%; "> could be hidden
    </div>

有没有人对如何做到这一点有任何想法？

Answer 1

尝试将工具栏定位为绝对值，以便它们不会占用任何空间。然后，您可以在iframe的两侧添加填充，以便它不会覆盖工具栏。

iframe的填充应该与工具栏的高度一样多。

#topToolbar {position: absolute; top: 0;}
#footerToolbar {position: absolute; bottom: 0;}
#viewer_control {padding: 30px 0 30px 0;}

希望这有帮助

Answer 2

如果您需要div元素覆盖100％高度，那么您可以使用

height:100vh;

'vh'单位代表视口高度，并使元素覆盖全高度。

Answer 3

感谢您的回复，但那些不起作用。我终于开始工作，但不得不根据哪些工具栏可见而切换viewerContainer类，并让这些类使用calc高度。由于我们在主项目中使用角度，因此很容易做到。

嵌套div，工具栏的另一个100％高度问题

3 个答案: