コンテンツはdivの内側にスクロールしています

Question

私はdivを持っており、コンテンツはdivに配置されています。しかし、コンテンツはdivから溢れていて、divの後ろでは奇妙にスクロールしています。実際のページがスクロールするのを止めています。

これがなぜ起こっているのかを検出するのに助けてくれる人がいますか？

すべてのコードはdbから印刷されています。 これは現在起こっていることです。白黒以外のテキストは、オーバーフローしているコンテンツです。

.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コンテンツのコンテンツはdiv.optionコンテンツをオーバーフローするのに十分な背が高くありません。だから私はいくつかの行を追加しました。その後、div.option-contentにmax-heightの値を追加し、内容はスクロール可能です。

Btw、ダミーコンテンツでコード内の変数を削除してください。 Stackoverflowはあなたのコードの中で '$ Products'が何を意味するのか分かりません。

ご不明な点がございましたら、お気軽にお問い合わせください。