Question

#outer

#inner具有固定的预定义大小。我希望#outer始终在#inner之内（如果#inner { width: 100%; height: 100%; overflow: scroll; }的内容太大，那么可以将其滚动）。

“解决方案”：

#inner

此解决方案是错误的，因为它使#outer的垂直大小与#inner完全相同，并且由于h2低于#inner，因此它会{ {1}}总是超越#outer，看起来真的很难看。

现在我不知道h2的垂直大小（因为它取决于字体），据我所知CSS不允许我们动态检索元素的大小，所以我可以'做那样的事情：

#inner {
    height: calc(100% - getHeightOf(#outer>h3));
}

我的问题的解决方案是什么？无论#inner的内容有多大，我怎样才能#outer永远不会走到#inner之外？

Answer 1

场景-1：您不希望h2内容处于固定位置。如果内部内容溢出，它也会滚动。

#outer{
  width: 100%;
  height: 200px;
  background-color: #eee;
  border: 2px solid grey;
  overflow: auto;
}
#inner{
  background-color: #ccc;
}

<div id="outer">
    <h2>blah</h2>
    <div id="inner">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

场景-2 ：您希望h2在不应滚动的意义上得到修复。滚动条应该只在内部div中。在这种情况下，使用div而不是h2并使用确定的高度，如下所示：

#outer{
  width: 100%;
  height: 200px;
  background-color: #eee;
  border: 2px solid grey;
  overflow: hidden;
}
.my-h2{
  font-size: 20px;
  font-weight: bold;
  height: 10%;
}
#inner{
  height: 90%;
  overflow: auto;
  background-color: #ccc;
}

<div id="outer">
  <div class="my-h2">blah</div>
    <div id="inner">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

Answer 2

将Overflow:scroll属性提供给outer

如何使元素不大于封闭元素？

2 个答案: