CSS div高度自动是0

Question

由于某些原因，我的固定头部高度为0。如何使头部div采用其子元素header-title的高度？我正在尝试在动态分辨率下显示固定头部下方的内容。在线解决方案适用于包含浮动元素的div；但这不是这里发生的事情。 CodePen：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;
}

谢谢大家！

- Sam Araiza

---

一个解决方案是使用Javascript（jQuery或其他库）来查找.header-title的高度。然后将CSS样式添加到.content类中，其中包含margin-top:(header-title元素的高度)。 - Zedrian

@AurelienSchlumberger 感谢您的回复。对于我正在处理的项目来说，性能是一个很重要的问题。我考虑将JQuery作为最后的选择。一定有一个CSS解决方案。 - Sam Araiza

我不知道有什么CSS解决这个问题的方法。正如Quentin所写，position:fixed会将其从流中移除，因此它无法影响其他元素的定位。您将不得不使用JavaScript（或为标题定义最大高度并以此方式分隔内容。然后它就不是动态的了，我知道）。 - lukasgeiter

@lukasgeiter，好难过 :( 我已经在滥用 JQuery 了。我希望有些 CSS 的东西我还不知道。我只需给标题一个百分比高度，并为内容 div 给一个合理的百分比上边距。再次感谢大家。 - Sam Araiza

我建议CSS4可以使相对定位的div在滚动时保持不变。相对固定，哈哈。 - Sam Araiza

那真是太好了！此外，在使用百分比和边距/填充时必须非常小心。该值相对于父元素的宽度（即使您使用 margin-top）。详细信息 - lukasgeiter

Answer 1

元素的所有子元素都应该使用position: fixed或position: absolute（在本例中是前者）。

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

请将position: fixed设置在标题栏上，而不是标题。

- Quentin

---

感谢您的输入。我使用头部包装器的原因是希望标题和内容div垂直堆叠。如果没有包装器，标题div将无法获得正确的高度，但是内容div中的内容将从屏幕左上角开始，这与我最初的结果相同，只是原因不同 :/ 如果我可以使内容div相对于固定的头部div进行定位，那就太好了... - Sam Araiza