使 HTML 元素扩展以适应内容

Posted 2023-03-06

【中文标题】使 HTML 元素扩展以适应内容

【英文标题】：Make HTML Element Expand To Fit Content

【发布时间】：2015-09-19 10:46:41

【问题描述】：

我正在编写一个 web 应用程序，主要是在 AngularJS 中使用 CSS 的 flexbox 进行一些布局，如果这很重要的话。在过去的几个小时里，我一直在发疯，试图解决我目前遇到的问题。

我遇到的问题如下： 一个页面上有两个并排的divs。最左边的div 是一个菜单，它必须始终是文档内容或浏览器窗口的高度（以较大者为准）。最右边的div 是动态附加内容的那个。程序启动时，最右边的div 小于浏览器窗口的高度（因为它没有太多内容），但随着应用程序的进行，内容被添加到其中，最终它比浏览器窗口长得多.

可以在by clicking here找到一个显示问题的 JSFiddle。

fiddle 的 html 结构大部分是固定的（可以添加容器，但不应删除），因为这是对具有相同基本结构的复杂应用程序的极大简化。此外，我将所有 CSS 高度设置为 100% 仅仅是因为阅读了另一个答案，而不是因为我知道它们是完成这项工作所必需的（但是，我确实希望菜单以全屏开始，即使内容很少）。

黑色的div 代表菜单，黄色的div 代表保存内容的菜单。当单击“单击我添加内容”按钮时，100 行内容将附加到内容 div 中，使其比窗口长。所需的效果是黄色和黑色 divs 都扩展，使得黄色 div 与容纳内容所需的一样大，黑色 div 与黄色 div 的高度相同。相反，当添加内容时（如您所见）既不是黑色也不是黄色divs 扩展，并且内容只是流到黄色div 的边界之外。

我已经尽我所能在 *** 和其他地方研究了这个问题，但似乎没有任何解决方案适用于这种类型的动态内容（尽管我可能并且很可能会遗漏一些东西）。像this one 和this one 这样的答案建议在某些元素上使用min-height 属性，但是当我尝试它时，黑色和黄色divs 开始很小（内容大小，而不是完整的浏览器高度）但确实正确展开。基本上，当我尝试其他人的解决方案时，似乎我可以让divs 开始时很小（小于全屏）并正确增长或正确开始（全屏，即使初始内容较小）并且不要不会增长，但不能同时增长（我希望 divs 能够正确开始并增长以适应内容）。此外，this one 等答案建议结合使用 min-height 和 height 以实现一种或另一种效果，但不是我正在寻找的两者。

如果能得到任何帮助，我将不胜感激，感谢您抽出宝贵时间。

编辑：

精简版，适合赶时间的人。

我希望能够让两个并排的divs 从浏览器窗口的整个高度开始，即使其中没​​有内容。然后，当向其中一个divs 添加足够的内容以使其大于浏览器时，两个divs 都会扩展以适应可用内容。 JSFiddle 可在this link 获得。小提琴的问题是黄色和黑色的divs 在按下添加新内容按钮时不会扩展以适应新内容。

【问题讨论】：

如果你要问一个问题并写这么多，请提供一个截断的 tl;dr.

@Swordfish0321 完成 - 在底部添加简短摘要以供喜欢的人使用

【参考方案1】：

您可以使用display:table-cell 来实现此目的。请查看JSfiddle。

【参考方案2】：

使用flexbox 我想出了这个结构，它似乎符合您的初始标准。

我在Codepen 中添加了一个带有超高“扩展器”div 的演示，以便您可以看到添加大量内容时的效果。

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;

html,
body 
  min-height: 100%;

.wrapper 
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  min-height: 100vh;

main 
  flex-grow: 1;
  border: 1px solid red;
  height: 100%;
  display: flex;

.left 
  width: 200px;
  background: lightblue;
  flex: none;

.right 
  flex-grow: 1;
  background: salmon;

<div class="wrapper">
  <main>
    <div class="col left">
      <h3>Fixed Left</h3>
    </div>
    <div class="col right">
      <h3>Flexible Right</h3>
    </div>
  </main>
</div>

【讨论】：

这是我最终使用的答案。其他的似乎也能正常工作，我真的很感激它们，但这个似乎与我的应用程序的其余部分相得益彰。感谢您的时间和帮助！

【参考方案3】：

玩弄这个问题中的 CSS - nested flexbox optimization - 我能够让您的示例正常工作，同时大大简化了您的 CSS。

诀窍似乎是在body 元素处开始flexing，并告诉容器增长，但永远不要缩小：

body 
    display: flex;
    flex-direction: column;


.container, .subContainer 
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;

用完整的代码更新了 JSFiddle（<div class="subContainer"> 不是必需的，如果你不需要它来做其他事情，可以将其删除）：http://jsfiddle.net/aej8na8q/38/

【讨论】：

谢谢！这提供了非常有趣的信息 - 毫无疑问在未来很有用