內容是在div後面滾動它意味着在

裏面我有一個div，內容已經放在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>

來源

2016-07-04 user6456767

你的'table'元素以無效的方式包含'hr'和'br'，這很可能會產生意想不到的結果。發佈一個最小的工作代碼片段，清除那些部分，所以我們有了什麼工作。 – LGSon

@LGSon我已經刪除了hr和br標籤沒有什麼區別 – user6456767

用一個例子發表一個小提琴，更容易幫助你， – stalin

.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和et瞧，內容是可滾動的。

順便說一句，請刪除您的代碼中的變量與一些虛擬內容。 Stackoverflow不知道代碼中的'$ Products'是什麼意思。

如果您還有其他問題，請隨時詢問。

來源

2016-07-05 09:37:24

內容是在div後面滾動它意味着在

回答

相關問題