CSS 匹配前一个同级元素的宽度（扩展背景颜色以溢出内容）

问题描述 投票：0回答：1

我在一个 div 中有两个元素，它们都有不同的背景颜色。第一个 div 有时可能会溢出（由于动态内容），因此背景颜色不会扩展到覆盖溢出的内容。

示例代码：

<html>

<head>
  <style>
    html {
      font-size: 10px;
    }

    body {
      margin: 0;
    }

    .header {
      text-size-adjust: 100%;
      font-size: 1.4rem;
      line-height: 1.4rem;
      z-index: 10;
      display: flex;
      flex-direction: row;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      align-items: center;
      padding: 0px 3.2rem;
      gap: 1.6rem;
      height: 5.5rem;
      background: rgb(255, 255, 255);
      border-bottom: 0.1rem solid rgb(177, 187, 205);
      box-sizing: unset;
    }

    .app {
      max-height: calc(100vh - 56px);
      overflow: auto;
    }

    .sub-header {
      display: flex;
      gap: 24px;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center;
      padding: 32px 64px;
      width: 100%;
      height: 112px;
      background-color: rgb(42, 49, 65);
      box-sizing: border-box;
    }

    .content {
      padding: 2.4rem 6.4rem;
      background-color: rgb(229, 232, 238);
    }
    .content p {
      font-size: 1.4rem;
    }
  </style>
</head>

<body>
  <div>
    <div class="header">
      <div>Header 1</div>
    </div>
    <div class="app">
      <div class="sub-header">
        <button>Button #1</button>
        <button>Button #2</button>
        <button>Button #3</button>
        <button>Button #4</button>
        <button>Button #5</button>
        <button>Button #6</button>
        <button>Button #7</button>
        <button>Button #8</button>
        <button>Button #9</button>
        <button>Button #10</button>
        <button>Button #11</button>
        <button>Button #12</button>
        <button>Button #13</button>
        <button>Button #14</button>
        <button>Button #15</button>
      </div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis est condimentum, consequat nisi nec,
          consequat metus. Maecenas feugiat ligula sit amet odio suscipit sodales ac vel mauris. Maecenas tempus, dui
          sed pulvinar mattis, massa justo tempor justo, ac condimentum odio diam ut lacus. Praesent in odio a lacus
          viverra ultricies non a est.
        </p>
      </div>
    </div>
  </div>
</body>

</html>

JSFiddle：https://jsfiddle.net/Ltwav18c/

我该怎么做才能确保两个 div（

sub-header
和 
content
）的背景颜色扩展到其溢出的内容。

content
div 不会溢出，只有 
sub-header
div 会溢出。

我尝试设置子标题 div 的 

width: fit-content
和 
min-width: 100%
并扩展 
background-color
以覆盖其所有内容，如果它不溢出，则它会扩展到视口大小。

JSFiddle：https://jsfiddle.net/Ltwav18c/1/

但是问题是第二个div的宽度没有延伸，所以它仍然是

100%
。我希望第二个 div 始终匹配第一个 div 的宽度。

仅供参考，我无法修改父 div（

app
和 
header
）的 CSS，因为它们由不同的应用程序控制，并且我的应用程序正在嵌入。

html css width
1个回答
1
投票

您可以考虑将 

.sub-header
和 
.content
包装在网格布局中。 
width: fit-content
的
.sub-header
导致网格列轨道与
.sub-header
一样宽。然后，这会给 
.content
更多的空间来填充，从而匹配 
.sub-header
的宽度：

html {
  font-size: 10px;
}

body {
  margin: 0;
}

.header {
  text-size-adjust: 100%;
  font-size: 1.4rem;
  line-height: 1.4rem;
  z-index: 10;
  display: flex;
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  padding: 0px 3.2rem;
  gap: 1.6rem;
  height: 5.5rem;
  background: rgb(255, 255, 255);
  border-bottom: 0.1rem solid rgb(177, 187, 205);
  box-sizing: unset;
}

.app {
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.sub-header {
  display: flex;
  gap: 24px;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  padding: 32px 64px;
  width: fit-content;
  height: 112px;
  background-color: rgb(42, 49, 65);
  box-sizing: border-box;
}

.content {
  padding: 2.4rem 6.4rem;
  background-color: rgb(229, 232, 238);
}

.content p {
  font-size: 1.4rem;
}
<div>
  <div class="header">
    <div>Header 1</div>
  </div>
  <div class="app">
    <div style="display: grid">
      <div class="sub-header">
        <button>Button #1</button>
        <button>Button #2</button>
        <button>Button #3</button>
        <button>Button #4</button>
        <button>Button #5</button>
        <button>Button #6</button>
        <button>Button #7</button>
        <button>Button #8</button>
        <button>Button #9</button>
        <button>Button #10</button>
        <button>Button #11</button>
        <button>Button #12</button>
        <button>Button #13</button>
        <button>Button #14</button>
        <button>Button #15</button>
      </div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis est condimentum, consequat nisi nec, consequat metus. Maecenas feugiat ligula sit amet odio suscipit sodales ac vel mauris. Maecenas tempus, dui sed pulvinar mattis, massa justo tempor
          justo, ac condimentum odio diam ut lacus. Praesent in odio a lacus viverra ultricies non a est.
        </p>
      </div>
    </div>
  </div>
</div>

使用 flex 的替代解决方案：

html {
  font-size: 10px;
}

body {
  margin: 0;
}

.header {
  text-size-adjust: 100%;
  font-size: 1.4rem;
  line-height: 1.4rem;
  z-index: 10;
  display: flex;
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  padding: 0px 3.2rem;
  gap: 1.6rem;
  height: 5.5rem;
  background: rgb(255, 255, 255);
  border-bottom: 0.1rem solid rgb(177, 187, 205);
  box-sizing: unset;
}

.app {
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.sub-header {
  display: flex;
  gap: 24px;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  padding: 32px 64px;
  width: fit-content;
  height: 112px;
  background-color: rgb(42, 49, 65);
  box-sizing: border-box;
}

.content {
  padding: 2.4rem 6.4rem;
  background-color: rgb(229, 232, 238);
}

.content p {
  font-size: 1.4rem;
}
<div>
  <div class="header">
    <div>Header 1</div>
  </div>
  <div class="app">
    <div style="display: flex; flex-direction: column; width: fit-content;">
      <div class="sub-header">
        <button>Button #1</button>
        <button>Button #2</button>
        <button>Button #3</button>
        <button>Button #4</button>
        <button>Button #5</button>
        <button>Button #6</button>
        <button>Button #7</button>
        <button>Button #8</button>
        <button>Button #9</button>
        <button>Button #10</button>
        <button>Button #11</button>
        <button>Button #12</button>
        <button>Button #13</button>
        <button>Button #14</button>
        <button>Button #15</button>
      </div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis est condimentum, consequat nisi nec, consequat metus. Maecenas feugiat ligula sit amet odio suscipit sodales ac vel mauris. Maecenas tempus, dui sed pulvinar mattis, massa justo tempor
          justo, ac condimentum odio diam ut lacus. Praesent in odio a lacus viverra ultricies non a est.
        </p>
      </div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.