如果DIV位于可滾動的父DIV中，如何將其寬度設定為100%？-有解無憂

想將child_subDIV的寬度設定為100% 寬度，這樣即使我水平滾動父 DIV，child_subDIV 也應該覆寫父 DIV 的整個寬度。

這是代碼：

.main {
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}
.main_sub {
  width:100%;
}
.main_sub_sub {
  display:inline-block;
  width:50px;
}
.child_sub {
  width:100%;
  background:darkred;
  color:white;
}

<div class="main">
  <div class="main_sub">
    <p class="main_sub_sub">1</p>
    <p class="main_sub_sub">2</p>
    <p class="main_sub_sub">3</p>
    <p class="main_sub_sub">4</p>
    <p class="main_sub_sub">5</p>
    <p class="main_sub_sub">6</p>
    <p class="main_sub_sub">7</p>
    <p class="main_sub_sub">8</p>
    <p class="main_sub_sub">9</p>
    <p class="main_sub_sub">10</p>
    <p class="main_sub_sub">11</p>
    <p class="main_sub_sub">12</p>
    <p class="main_sub_sub">13</p>
    <p class="main_sub_sub">14</p>
    <p class="main_sub_sub">15</p>
    <p class="main_sub_sub">16</p>
    <p class="main_sub_sub">17</p>
    <p class="main_sub_sub">18</p>
    <p class="main_sub_sub">19</p>
    <p class="main_sub_sub">20</p>
  </div>
  <hr>
  <div class="child_sub">
    <div>
    some
    </div>
  </div>
</div>

這是可以玩的小提琴

正如你可以在小提琴看，如果我滾動父mainDIV的child_sub被設定在DIV 100％只涵蓋直到10th在現場main核實。我試圖默認設定child_subDIV 以覆寫 DIV 的全長main。

我遇到了關于同一查詢的 SO 答案，它告訴我添加display:table-row到child_sub，但不幸的是，我無法自己讓它作業。

SO 查詢相同

任何幫助是極大的贊賞。

uj5u.com熱心網友回復：

.child_sub 已經具有父級的 100% 寬度，溢位不會改變 div 的尺寸。

有多種方法可以實作相同的結果，最簡單的方法是.child_sub從滾動中洗掉

另一種方法是添加position: absolute到.child_sub

uj5u.com熱心網友回復：

就在您.main設定的容器下方，帶有display:grid;.

<div class="main">
  <div class="grid">
    <div class="main_sub"></div>
    <div class="child_sub"></div>
  </div>
</div>

這樣它將占用整個寬度。

.grid{
  display:grid;
}
.grid hr {
  width: 100%;
}

演示：

.main {
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}
.grid{
  display:grid;
}
.grid hr {
  width: 100%;
}
.main_sub {
  width:100%;
}
.main_sub_sub {
  display:inline-block;
  width:50px;
}
.child_sub {
  width:100%;
  background:darkred;
  color:white;
}

<div class="main">
  <div class="grid">
    <div class="main_sub">
      <p class="main_sub_sub">1</p>
      <p class="main_sub_sub">2</p>
      <p class="main_sub_sub">3</p>
      <p class="main_sub_sub">4</p>
      <p class="main_sub_sub">5</p>
      <p class="main_sub_sub">6</p>
      <p class="main_sub_sub">7</p>
      <p class="main_sub_sub">8</p>
      <p class="main_sub_sub">9</p>
      <p class="main_sub_sub">10</p>
      <p class="main_sub_sub">11</p>
      <p class="main_sub_sub">12</p>
      <p class="main_sub_sub">13</p>
      <p class="main_sub_sub">14</p>
      <p class="main_sub_sub">15</p>
      <p class="main_sub_sub">16</p>
      <p class="main_sub_sub">17</p>
      <p class="main_sub_sub">18</p>
      <p class="main_sub_sub">19</p>
      <p class="main_sub_sub">20</p>
    </div>
    <hr>
    <div class="child_sub">
      <div>
      some
      </div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322075.html

標籤：html css

上一篇：svg作為游標url值未得到應用

下一篇：復制UI模板