CSS div高度自动为0

Question

由于某种原因，我的固定标题高度为 0。如何使标题 div 采用其子元素 header-title 的高度？我试图在动态分辨率方面显示固定标题下方的内容。网上的解决方案是针对包含浮动元素的div；但这不是这里发生的事情。代码笔： http: //codepen.io/samaraiza/pen/czajq

HTML:
<div class="container">
  <div class="header">
    <div class="header-title"> Cool Title </div>
  </div>
  <div class="content"> Cool Content </div>
</div>

CSS:
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: green;
}

.header {
  position: relative;
  width: 100%;
  height: auto;
  background: yellow;
  text-align: center;
  font-size: 3vw;
}

.header-title {
  position: fixed;
  width: 100%;
  background: red;
}

.content {
  position: relative;
  font-size: 1.5vw;
}

感谢大家！

Answer 1

标头的所有子元素为position: fixed或position: absolute（在本例中为前者）。

以这种方式定位的元素将从正常流中取出，并且不会影响其周围元素的尺寸或位置。

设置position: fixed在标题上而不是标题标题上。