具有动态高度的固定导航栏后的容器答案

【问题标题】：Container after fixed navbar with dynamic height具有动态高度的固定导航栏后的容器
【发布时间】：2017-10-31 20:03:13
【问题描述】：

我有一个动态高度的标题（最小高度：50 像素）。

当然，它可以高于 50px。我想要一个容器，下面有一些内容。

我可以使用边距或其他格式吗？

【问题讨论】：

能否请您添加您的代码或sn-p？

标签： html css positioning fixed

【解决方案1】：

使用 js 获取标题高度并为内容 div 分配边距顶部。

var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';

【讨论】：

【解决方案2】：

你的意思是这样的吗？

body {
  height: 500px;
  background-image: linear-gradient(to bottom, #eee 0%, #000011 100%);
}
.header-container {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
}
.header {
  min-height: 50px;
  padding: 15px;
  background-color: #72f072;
}
.header-container .header p,
.header-container .something p {
  margin: 0px;
}
.header-container .something {
  padding: 15px;
  background-color: #fff;
}

<div class="header-container">
  <div class="header">
    <p>some content</p>
  </div>
  <div class="something">
    <p>some other content</p>
  </div>
</div>

【讨论】：

对！这就是我的意思，谢谢。我想我试试用 javascript 的那个
没问题，请标记您的问题的答案

【解决方案3】：

您应该给容器一个与固定导航栏高度相等的 margin-top。但是由于导航栏的高度可能需要增加，我通常会根据需要通过媒体查询更改高度和容器边距。

【讨论】：

我想我必须这样做。遗憾的是没有其他更有效的方法。谢谢你的回答