html – 仅限CSS – 基于兄弟的div的高度

概述所以我有两个div,一个是.header,另一个是.content,它们一起占据了整个页面. .header将设置到位,只有内容会滚动. 我想根据没有javascript的.header的高度使内容的高度成为动态. 如果.header具有固定的高度,则可以通过计算来实现,但不是因为高度可以变化. 码： .container { height: 100%;}.header { heigh 所以我有两个div,一个是.header,另一个是.content,它们一起占据了整个页面. .header将设置到位,只有内容会滚动.

我想根据没有javascript的.header的高度使内容的高度成为动态.

如果.header具有固定的高度,则可以通过计算来实现,但不是因为高度可以变化.

码：

.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>

请参阅内容here的切换

是否只有CSS解决方案,根据.header的大小计算.content的高度？

解决方法 使用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>

或显示：表格

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>

并且与后备合并,如果支持,则灵活开始.

注意,如果标题缩小为内容,则需要标题的高度：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>

总结

以上是内存溢出为你收集整理的html – 仅限CSS – 基于兄弟的div的高度全部内容，希望文章能够帮你解决html – 仅限CSS – 基于兄弟的div的高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。