html - CSS填充父高度重新加载

标签 html css

我有一个非常著名的填充父高度问题的例子:http://fiddle.jshell.net/y9bM4/379/我真的试图通过谷歌搜索找到解决方案,但我找不到满足这些要求的任何东西:

  • 元素的高度未知,既不是百分比也不是绝对大小。所以 position: absolute;顶部:?px;底部:0px 无效
  • 上面的盒子应该只占用其内容所需的空间,所以根据我对 flexbox 的了解,我似乎也不能使用它(只是在示例中使用它,因为它与我最接近得到)
  • 外层容器有固定的高度(在本例中为主体的 90%)

如果每个容器中的 flex: 1 是上层容器的最大增长就好了。这甚至可以用 css 实现吗?

最佳答案

我不确定您要做什么,但我向您保证您希望第二个容器使用第一个容器根据其内容调整大小后剩余的空间。

如果是这样,将 .content 类设置为 height:0flex-grow:1

更新示例: http://fiddle.jshell.net/y9bM4/385/

关于html - CSS填充父高度重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30222326/

相关文章:

javascript - 将鼠标悬停在 td 上并添加一个类以跨越

html - 删除行之间的边距

php - 基础菜单在 CodeIgniter 中不起作用

jquery - 带有向上/向下箭头的垂直文本框轮播

javascript - 使用 Google reCAPTCHA 验证表单提交

javascript - 如何在用户点击后禁用可点击元素?

html - CSS - 并排显示图像

css - 哪种方式适合定义字体系列?

html - 将 css 样式应用于子元素

jquery - 如何在没有滚动的情况下使追加的 div 文本可见?