如果其他 DIV 溢出宽度，则 DIV 中的间隙

Question

内容div需要溢出宽度，但顶部出现空隙div。

请运行片段并向右滚动，您会注意到顶部的空隙 div

#header {
  background: red;
}
#content {
  white-space: nowrap;
}

<div id="header">
  <p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>

如何填补页眉上的空白 div？

Answer 1

我认为这不太可能。你可以使用的是overflow:scroll，它会给大元素添加一个滚动条

#header {
  background: red;
}
#content {
  white-space: nowrap;
  overflow-x:scroll;
}

<div id="header">
  <p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>

编辑：这是另一个应该可以解决问题的片段： display:inline-block 会根据最大的子元素调整宽度

#header {
  background: red;
}
#content {
  white-space: nowrap;
}
.container {
    display:inline-block;
}

<div class="container">
    <div id="header">
      <p>HEADER</p>
    </div>
    <div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
</div>

Answer 2

如果你的设计可以做到，就把你的headerdiv放到溢出的div里，然后做成auto-fit:

HTML:

<div id="content">
    <div id="header">
      <p>HEADER</p>
    </div>
  LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT
</div>

CSS:

#header {
  left:0px;
  right:0px;
  top:0px;
  background: red;
}
#content {
  width:1000px;
  white-space: nowrap;
}

https://jsfiddle.net/p7m8wg48/

或者制作一个包装器：

HTML:

<div id="bodyClass">
    <div id="header">
      <p>HEADER</p>
    </div>
    <div id="content">
      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT
    </div>
</div>

CSS:

#bodyClass{
  width:1000px;
}
#header {
  left:0px;
  right:0px;
  top:0px;
  background: red;
}
#content {
  white-space: nowrap;
}

https://jsfiddle.net/dLmt1Ley/

编辑：回复：In your first suggestion, why did you put a fixed width? If I removed the fixed width the gap returns. 那是因为您不能将填充设置到元素的未定义边缘。宽度固定在类似 before 的状态。溢出的内容调整了实际宽度，但需要设置。

如果其他 DIV 溢出宽度，则 DIV 中的间隙

Gap in DIV if other DIV overflows width

html

css

width