使容器 div 根据需要占用尽可能多的空间

Posted 2023-03-06

【中文标题】使容器 div 根据需要占用尽可能多的空间

【英文标题】：make container div take up as much space as needed

【发布时间】：2020-08-08 03:42:42

【问题描述】：

我有一个包含另一个容器的容器 div。如果屏幕尺寸允许，我希望我的外部容器能够占用所需的空间，但我仍然会得到一个滚动条。

.outer 
  padding: 16px;
  color: black;
  background: white;
  overflow: auto;
  border: 1px solid black;
  display: block;
 

<div class="outer">
  <div class="inner">
    Some content...
  </div>
</div>

内部 div 没有样式，默认显示块；

【问题讨论】：

这能回答你的问题吗？ Make a div fill the height of the remaining screen space

如果屏幕尺寸允许，我希望我的外部容器占用所需的空间需要什么空间？什么空间垂直或水平？

也许这有帮助：***.com/questions/45948202/…

水平。这是一个工具提示，其内容大约为 400 像素宽，但工具提示占用了大约 100 像素，尽管还有空间可以占用更多空间。

@C-lara 不幸的是没有..

【参考方案1】：

我想通了。在我的容器 div 内的 div 内部有一个绝对位置。这就是内容不会展开的原因。

【参考方案2】：

如果你想让 div 随内容一起增长，你可以这样定义：不定义宽度和/或高度，那么 div 元素会随内容一起增长。但内容必须不设置为绝对！如果内容设置为浮动，则必须设置到容器中

overflow:hidden

然后它会随着内容而增长。你仍然可以定义一个 max-with:

max-width: 400px; 

希望对您有所帮助！

【讨论】：

好吧。这有助于设置具有可滚动内容的特定宽度的容器，但不幸的是，这不是我想要的。如果内容小于 400px，我不希望容器占用 400ps。假设内容占用 50 像素，我希望容器宽 50 像素。

谢谢@C-lara 我仍然有容器没有占用尽可能多的空间的问题。尽管内容为 100 像素，但该容器的宽度约为 20 像素。我尝试添加 width: 100% 但是在内容之后我得到了很多空白。

也许您可以稍微调整一下百分比...尝试 80%、60%、40%...但是请记住，当您想要一个响应式设计。您最终可能会为不同的屏幕尺寸定义宽度。