时间戳

首页 > 解决方案 > css 在固定高度旁边有一个全高 div？

html - css 在固定高度旁边有一个全高 div？

问题描述

我想实现一个非常简单的事情：在绝对定位的外部 div 中有 2 个 div。

内部 div 是header和content。

Header有一个固定的高度（但它取决于字体大小，即它没有任何高度属性预设）。

目标是将 设置content为低于header并强制它向下占用所有空间，而不会使页面高于视口。

请不要推荐 flex 属性，因为我发现它不是完全独立于浏览器的。在 Firefox 中运行良好，但在 Chrome 中它破坏了页面。

这是 JSFiddle 示例：https ://jsfiddle.net/danergo/qpjc3mr0/7/

更新

JSFiddle 已更新。破坏 flexbox 的是内容中有另一个项目希望 tp 使用内容的 100% 高度。

世界卫生大会

标签： htmlcss

解决方案

实现您需要的现代方法是使用 CSS 网格。要让它在 IE 11 中也能正常工作，您需要添加一些专有的 CSS 规则。如果你对这些感兴趣，我也可以添加它们。

body { margin: 0; }
#main {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header"
    "content";
  height: 100vh;
  background:red;
}

#header {
  grid-area: header;
  background:yellow;
}

#content {
  background:gray;
  grid-area: "content";
}
<div id="main">

  <div id="header">
    Header
  </div>
  <div id="content">
    content
  </div>


</div>

代码的关键部分是

grid-template-rows: auto 1fr;

这意味着网格由两行组成，第一行是 sized auto，这意味着它将适应内部的任何内容。声明了第二个1fr，告诉它覆盖其余部分。

如果您遇到#content元素变得过高的问题，请替换1fr为minmax(0, 1fr).

推荐阅读