具有固定高度的背景颜色扰乱了我的文档流

Question

我需要我的背景颜色固定大小，我希望我的 #second-div 在 <hr> 之后开始。但是 bg-color 的这个固定高度扰乱了我的文档流程，并且 bg-div 的 h1-s 出现在我的 #second-div 上。有什么想法我该如何解决？

我试过使用 clearfix 但它没有帮助，因为 bg-div 没有浮点数...

编辑：指定 - 我需要那些 h1-s 溢出绿色 bg。变通方法：我已经为固定高度背景创建了另一个 div，然后给 bg-div 一个负的上边距。在视觉上它满足了我的需求，但想知道是否有更简单的解决方案。

<head>
  <style>
    .bg-div { 
      width: 100%;
      height: 200px;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div class="bg-div">
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <hr>
  </div>
  <div id="second-div">
    <h1>second div content</h1>
  </div>
</body>

codepen link with same html-css to play around

Answer 1

如果您保持固定高度，那么内容显然会溢出。这不是很好的做法 height:100% 并且看到它非常适合并且基于内容是动态的。您的 html 应该是动态的，因为您无法实时预测内容的大小。

Answer 2

听起来您为 bg-div 设置的高度太小，无法容纳您放入其中的所有 H1 元素。您可以通过将 font-size 设置为更小的值来使 H1 元素更小。或者，如果您不关心丢失放在 bg-div 中的某些内容，您可以在 bg-div 上设置 overflow: hidden。这将阻止浏览器显示来自 bg-div 的任何内容，否则这些内容将位于 div.

的边界矩形之外

Answer 3

如果您确实需要固定背景颜色作为布局的一部分，我会尝试使用绝对定位的 div 来达到此目的。见this CodePen参考

<div class="bg-block"></div>
<div class="first-div">
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <hr>
</div>
<div id="second-div">
  <h1>second div content</h1>
</div>

.bg-block { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-color:#00FF00;
  z-index: -1;
}

注意： 1. 通常不鼓励使用多个 h1，因为 h1 暗示内容的最高层级 2. 对这种类型的布局概念使用绝对大小单位通常不太灵活，因此我建议您尽可能考虑其他设计方法。

具有固定高度的背景颜色扰乱了我的文档流

Background-color with fixed height disturbs my document flow

html

css

height

background-color