如果其他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>

我怎样才能填补头格差距的差距？

Answer 1

我不认为这是完全可能的。你可以使用溢出：滚动，将滚动条添加到大元素

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

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

编辑：这里是另一个片段THA应该做的伎俩： 显示：inline-块将宽度适应最大的子元素

#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

如果你可以用你的设计做到这一点，只要把你的头的div到四溢的div并使其自动调整：

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/

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