如何在htmlheader中填写Space？

Question

我有 bin 试图改进我的第一个自制网站上的 header。我唯一不能做对的是用一种颜色填充剩余的 space。像这样：enter image description here

我试图通过让 div 填充 space 的其余部分来做到这一点，但无法让它工作。我已经阅读了很多示例和类似的问题，但是 none 的给定答案似乎对我有用。我能做到的最好的如下所示，但我似乎无法达到正确的高度。

到目前为止，这是我的代码：

.header-container {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: #1a1a1a;
  padding: 5px 20px 5px 0;
}

.header-container a {
  float: right;
  font-size: 16px;
  color: white;
  background-color: #000000;
  text-align: center;
  margin-left: 5px;
  padding: 10px 16px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: normal;
}

.dropdown {
  float: right;
  margin-left: 5px;
}

.dropdown .dropbtn {
  font-size: 16px;
  color: white;
  background-color: #000000;
  padding: 10px 16px;
  border-radius: 5px;
  border: none;
  outline: none;
}

.header-container a:hover,
.dropdown:hover .dropbtn {
  background-color: #279027;
}

.dropdown-content {
  display: none;
  position: fixed;
  padding: 5px;
  background-color: #1a1a1a;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  margin-left: 0;
  margin-top: 2px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.bar {
  height: 100%;
  overflow: auto;
  background-color: #279027;
  border-radius: 5px;
}

<html>
  <body>
    <div class="header-container">
      <a href="/">Home</a>
      <a href="/kontakt">Kontakt</a>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
      <div class="bar">test</div>
    </div>
  </body>
</html>

Answer 1

像下面这样.header-conatainer -> display:flex;

.header-container {
  display: flex;
}

从 children 中删除 float。
制作 .bar flex: 1;

.bar {
  flex: 1;
}

如何在htmlheader中填写Space？

How to fill Space in a html header?

html

css

header