CSS div高度自动为0

Question

由于某些原因，我的固定标题的高度为 0。如何使标题 div 采用其子元素标题标题的高度？我正在尝试根据动态分辨率在固定标题下方显示内容。在线解决方案是针对包含 float 元素的 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

header 的所有子元素为position: fixed 或position: absolute(在本例中为前者)。

以这种方式定位的元素脱离了正常流，不会影响其周围元素的尺寸或位置。

将 position: fixed 设置在 header 而不是 header-title 上。