Question

在窗口调整大小时使用ng-grid和动态大小时遇到了问题。我有一个网格样本，他很好地调整了自己的大小。这里没问题。窗口/元素大小配置为dymaic。在某些时候，我需要在网格下方显示损坏规则的摘要。在页面的底部，我有命令按钮。一切都应该有动态尺寸。当我显示摘要时，它会重叠按钮。我尝试了最小高度，但它没有用。我需要的是，当协议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（夏季div）高度：20％并且溢出：滚动;所以它不会重叠夏日按钮。

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

CSS垂直DIV相互重叠（动态大小，实例）

1 个答案: