Question

我想要的是一个窗口。这意味着可以单击并拖动并按住关闭按钮或其他任何内容的顶部栏，以及滚动时不会隐藏顶栏的可滚动内容容器。

我从原始代码中删除了两个示例，以显示我的问题。正文中的第一个div被破坏，因为可滚动内容div垂直扩展超过其父级的边界。第二个工作，但需要一个我不想要的固定像素高度。第二个显示我希望第一个看起来。

我尝试了什么：

如果overflow-y放在父div上，则父容器成功包含所有内容，但在页面滚动时我丢失了顶栏。
如果我删除了填充和标题div，内容div完全适合，但我需要这些。
我尝试过overflow-y：auto和hidden以及float：left / clear：所有来自其他问题。
我也尝试过使用jquery ui来使窗口可调整大小，所以我不必担心它的静态高度，但是当我调整它的大小时，内容div不会随父级调整大小，所以甚至这不起作用。

我希望父div绝对定位的原因是它看起来像一个窗口并且存在于页面流之外。我最终想在它上面做一个jQuery .draggable（）。这看起来很简单，但我只是看不到它。提前致谢

<html>
  <body>
    <div style="background-color: #DDDDDD; border: 2px solid #7F7F7F; height:30%; left: 10%; position: absolute; top: 5%;">
      <div style="border-bottom: 2px solid #7F7F7F; padding:14px;">
        <span>broken</span>
      </div>
      <div style="overflow-y: scroll; height:100%; padding: 40px;">
        <b>content_here_that_expands_horizontally_to_match_size_of_the_data</b>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <b>end of content here(lives outside of div)</b>
      </div>
    </div>

    <div style="background-color: #DDDDDD; border: 2px solid #7F7F7F; left: 10%; position: absolute; bottom: 5%;">
      <div style="border-bottom: 2px solid #7F7F7F; padding:14px;">
        <span>What I want, but without static pixel height</span>
      </div>
      <div style="overflow-y: scroll; height:100px; padding: 40px;">
        <b>content_here_that_expands_horizontally_to_match_size_of_the_data</b>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <b>end of content here(lives outside of div)</b>
      </div>
    </div>
  </body>
</html>

Div容器不包围儿童内容

0 个答案: