javascript - CSS 垂直 DIV 相互重叠(动态大小，实例)

Question

我在使用 ng-grid 和窗口调整大小的动态大小时遇到​​了问题。我有一个可以很好地调整自身大小的网格样本。这里没问题。窗口/元素大小配置为动态大小。在某些时候，我需要在网格下方显示违反规则的摘要。在页面底部我有命令按钮。一切都应该有动态大小。当我显示摘要时，它与按钮重叠。我试过最小高度，但没有用。我需要的是，当协议(protocol)div过长时，出现窗口滚动，不出现重叠。

我有一个我在做什么的例子:

有什么想法吗？请帮忙。 http://plnkr.co/edit/dKcDeWcNt0baIDmMRJ7x?p=preview

  <div style="height:95%;border:2px solid blue; ">
  <div style="height:90%;border:2px solid green;">
      <div style="height:100%;border:2px solid pink;">
          <div style="border:1px solid red; height:80%;position:relative;">
            <div class="gridStyle" ng-grid="gridOptions" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
          </div>
          <div id='yobaElem' style="display:none">
            ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>
            <textarea>Area</textarea>
          </div>
      </div>
  </div>
  <div>
    <input type="button" value="Summary" onclick="show()" />
  </div>
</div>

Answer 1

给你的内部 div(summery div) height:20% 和 overflow:scroll;所以它不会与夏季按钮重叠。

<div style="height:95%;border:2px solid blue; ">
  <div style="height:90%;border:2px solid green;">
      <div style="height:100%;border:2px solid pink;">
          <div style="border:1px solid red; height:80%;position:relative;">
            <div class="gridStyle" ng-grid="gridOptions" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
          </div>
          <div id='yobaElem' style="display:none;height:20%;overflow: scroll;">
            ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>ignore agreements
            <br/>
            <textarea>Area</textarea>
          </div>
      </div>
  </div>
  <div>
    <input type="button" value="Summary" onclick="show()" />
  </div>
</div>