在 div 中制作 100% 宽度的固定/粘性标题答案

【问题标题】：Making a fixed/sticky header with 100% width in a div在 div 中制作 100% 宽度的固定/粘性标题
【发布时间】：2021-09-02 08:25:20
【问题描述】：

我有一个带有固定/粘性标题和内容的 div。它的工作原理是当我滚动内容时，标题不会移动。

但我无法将标题宽度设为父 div 的 100%。

#main {
  background-color: lightcoral;
  height: 200px;
  width: 200px;
  resize: both;
  overflow: auto;
}

.menu {
  background-color: lightyellow;
  position: relative;
}

.header-wrapper {
  background-color: lightgrey;
  position: absolute;
}

.header {
  background-color: lightskyblue;
  position: fixed;
  width: 100%;
}

.content {
  padding-top: 30px;
}

<div>
  other content<br />other content<br />other content<br />
</div>
<div id="main">
  <div class="menu">
    <div class="header-wrapper">
      <div class="header">
        header
      </div>
    </div>
    <div class="content">
      content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
    </div>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这是你的答案：

#main {
    background-color: lightcoral;
    height: 200px;
    width: 200px;
    resize: both;
    overflow: auto;
}

.menu {
    background-color: lightyellow;
    position: relative;
}

.header-wrapper {
    background-color: lightgrey;
    position: sticky;
    top: 0vh;
}

.header {
    background-color: lightskyblue;
}

.content {
    padding-top: 30px;
}

<div>
    other content<br />other content<br />other content<br />
</div>
<div id="main">
    <div class="menu">
        <div class="header-wrapper">
            <div class="header">
                header
            </div>
        </div>
        <div class="content">
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        </div>
    </div>
</div>

【讨论】：

这很好用。谢谢你。我不知道为什么我没有想到/尝试粘性。我需要了解1vh 的含义......