仅使用CSS - 基于同级元素设置div的高度

Question

仅使用CSS - 基于同级元素设置div的高度

htmlcss

4

所以我有两个

，一个是.header，另一个是.content，它们一起占据整个页面。.header会被固定在原位，只有.content会滚动。

我想使内容的高度根据.header的高度动态变化，而不使用JavaScript。

如果.header具有固定的高度，可以通过calc来实现，但是由于其高度可能不同，因此这无法实现。

代码:

.container {
  height: 100%;
}
.header {
  height: 50px; // height is fixed, not great for dynamic content
}
.content {
  height: calc(100% - 50px); // height is a subtraction
}

<div class='container'>
  <div class='header'>Header</div>
  <div class='content'>
    Content
  </div>
</div>

在这里查看内容切换。

是否有一种仅使用CSS的解决方案，可以根据.header的大小计算.content的高度？

- SoluableNonagon

2个回答

1

使用 display: flex。

html, body { margin: 0; height: 100%; }
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  background: blue;
}
.content {
  flex: 1;
  background: red;
}

<div class='container'>
  <div class='header'> Header </div>
  <div class='content'>
    Content
  </div>
</div>

或者 display: table

html, body { margin: 0; height: 100%; }
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.header {
  display: table-row;
  height: 0;                  /*  shrink to fit content  */
  background: blue;
}
.content {
  display: table-row;
  background: red;
}

<div class='container'>
  <div class='header'> Header </div>
  <div class='content'>
    Content
  </div>
</div>

如果支持，flex 将与回退合并。

注意，如果要缩小到内容，则需要 header 的 height: 0

html, body { margin: 0; height: 100%; }
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.header {
  display: table-row;
  height: 0;                  /*  shrink to fit content  */
  background: blue;
}
.content {
  display: table-row;
  background: red;
}

@supports (display: flex) {

  .container {
    display: flex;
    flex-direction: column;
  }
  .header {
    display: block;
    height: auto;
  }
  .content {
    flex: 1;
    display: block;
  }

}

<div class='container'>
  <div class='header'> Header </div>
  <div class='content'>
    Content
  </div>
</div>

- Asons

@SoluableNonagon，当支持flex时，您可以合并它们。 - Asons

为什么Flex解决方案在标题上有固定高度？ - SoluableNonagon

@SoluableNonagon 已更新为动态的。 - Asons

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dippas · Accepted Answer

你可以使用 flexbox 来实现这个。

html,
body {
  margin: 0;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height:100%
}
.header {
  display: flex;
  border: 5px solid red
}
.content {
  flex: 1;
  border: 5px solid green
}

<div class='container'>
  <div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
    molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
    sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
    vitae, maximus at neque. Maecenas et dictum enim.</div>
  <div class='content'>
    Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
    in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
    vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
    at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
    sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
  </div>
</div>

或者使用CSS表格来支持较旧的浏览器（正如OP在评论中要求的那样）。

html,
body {
  margin: 0;
  height: 100%;
}
.container {
  display: table;
  width: 100%;
  height: 100%
}
.header {
  display: table-row;
  background: red
}
.content {
  display: table-row;
  background: green
}

<div class='container'>
  <div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
    molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
    sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
    vitae, maximus at neque. Maecenas et dictum enim.</div>
  <div class='content'>
    Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
    in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
    vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
    at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
    sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
  </div>
</div>