html - 内容在 div 后面滚动，它应该在里面

Question

我有一个div，内容已经放在了div中。但是，内容从 div 溢出，并且奇怪地滚动到 div 后面。这会阻止实际页面滚动。

谁能帮我查出为什么会这样。

所有代码都从数据库中打印出来。 这就是目前正在发生的事情。白纸黑字外面的文字就是溢出来的内容。

.option-content {
  /*    background-color: #fff;*/
  /*    overflow:hidden; keep products in div*/
  overflow: auto;
  float: left;
  color: #000;
  width: 100%;
  min-height: 200px;
  height: auto !important;
  background-color: #fff;
  margin-top: -100px;
  padding-top: 10px;
  border-top: 0 !important;
  z-index: -1;
}

<div id="option-content' . $i . '" class="option-content">
  <table id="ord_details" width="100%">
    <tr id="snd_r1">

      <td>
        <p id="prods' . $i . '" class="prods">' . $Products . '</p>
      </td>
      <td>£ &nbsp; ' . $prod_pric . '</td>

      <hr>
      </br>
    </tr>


  </table>
</div>

新代码

.option-content {
  /*    background-color: #fff;*/
  /*    overflow:hidden; keep products in div*/
  overflow: auto;
  float: left;
  color: #000;
  width: 100%;
  min-height: 200px;
  height: auto !important;
  background-color: #fff;
  margin-top: -100px;
  padding-top: 10px;
  border-top: 0 !important;
  z-index: -1;
}

<div id="option-content' . $i . '" class="option-content">
  <table id="ord_details" width="100%">
    <tr id="snd_r1">

      <td>
        <p id="prods' . $i . '" class="prods">' . $Products . '</p>
      </td>
      <td>£ &nbsp; ' . $prod_pric . '</td>

    </tr>


  </table>
</div>

Answer 1

.option-content {
  overflow: auto;
  float: left;
  color: #000;
  width: 100%;
  min-height: 200px;
  height: auto !important;
  background-color: #fff;
  /*margin-top: -100px;*/
  padding-top: 10px;
  /*border-top: 0 !important;*/
  z-index: -1;

  /* for debugging */
  border: 1px solid red;
  max-height: 240px;
}

<div id="option-content1" class="option-content">
  <table id="ord_details" width="100%">
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
    <tr id="snd_r1">
      <td>
        <p id="prods1" class="prods">awesome product</p>
      </td>
      <td>£ &nbsp; 3.99</td>
    </tr>
  </table>
</div>

目前 - div.option-content 的内容不够高，无法溢出 div.option-content。所以我添加了更多行。之后，我将最大高度值添加到您的 div.option-content 中，瞧，内容是可滚动的。

顺便说一句，请删除代码中包含一些虚拟内容的变量。 Stackoverflow 不知道代码中的“$Products”是什么意思。

如果您还有其他问题，请随时提问。