且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-09-29 08:06:31

您是说那样的东西吗?

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>