html - 容器 : one shrinks to fit its content, 中的 2 个堆叠 div,另一个扩展以填充剩余空间

标签 html css

这是一个jsfiddle包含我正在尝试做的基本 html 和 css。

这是我的 html:

#mother {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#header,
#footer {
  width: 100%;
  height: 20px;
  background-color: pink;
}

#title {
  width: 100%;
  background-color: grey;
}

#main {
  width: 100%;
  background-color: cyan;
}
<div id="mother">
  <div id="header">
  </div>
  <div id="title">
    Title content of indeterminate length
  </div>
  <div id="main">
    Main body content of indeterminate length
  </div>
  <div id="footer">
  </div>
</div>

我正在尝试创建一个将填充 100% 窗口高度的网站。

布局需要由 4 个部分组成: - 标题 - 标题 - 主要的 - 页脚

页眉和页脚具有固定的高度。标题和主要内容的长度未知。

我的理想行为是标题容器缩小以适合其内容,主容器扩展以填充页脚之前的剩余可用空间。主容器内将有 div,其大小需要调整为其高度的 100%。

使用绝对定位的元素或表格是可以接受的,只要它有 IE 支持(只需要支持最新版本,但支持旧版本就很棒了)。

最佳答案

尝试使用 Flexbox。 flex:1 意味着它将尽可能多地填充空间。因此,不使用 flex:1 保留标题可以使其缩小以适合其内容。

此外,不要忘记使用浏览器支持所需的所有前缀。

http://shouldiprefix.com/

这是 jsfiddle

html, body{

  height:100%;

}

#mother {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  flex-direction:column;
}

#header, #footer {
  width: 100%;
  height: 20px;
  background-color: pink;
}

#title {
  width: 100%;
  background-color: grey;
}

#main {
  width: 100%;
  background-color: cyan;
  flex:1;
}

关于html - 容器 : one shrinks to fit its content, 中的 2 个堆叠 div,另一个扩展以填充剩余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42903878/

相关文章:

html - 仅隐藏第一个元素,排除没有类或 ID 的嵌套元素

html - 替代文字显示在图像上

css - 覆盖默认的 img css

python - 开源 html 和 css

java - 如何将自定义 ScrollPanel 的高度设置为 100%?

html - 视差图像未填满宽度 - Materialise

javascript - 如何在 Javascript 中将文本文件中的段落作为单个字符串读取?

javascript - 页内 anchor 与 "scroll-then-fix"JS 导航栏代码结合使用时无法正常工作

html - 将悬停圆定位在 X 上

html - 设计 css 类名 : Content based vs Function based