html - 嵌套 div、工具栏的另一个 100% 高度问题

Question

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

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

plnkr example

问题是 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;}

希望对你有帮助