内容在div后面滚动它意味着在里面

Question

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

有人可以帮助我发现为什么会发生这种情况。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

新代码

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

目前 - div.option-content的内容不足以溢出div.option-content。所以我添加了更多的线条。之后，我在你的div.option-content和et voila中添加了一个max-height值，内容是可滚动的。

顺便说一句，请使用一些虚拟内容删除代码中的变量。 Stackoverflow不知道＆＃39; $ Products＆＃39;在你的代码意味着。

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