div在html頁面中沒有完全顯示其內容

-1

我在JSFiddle中編寫了下面的代碼。 https://jsfiddle.net/msridhar/1zvhmpjq/11/ HTML文件：div在html頁面中沒有完全顯示其內容

<body> 
<div id="headerDiv"> 
     <img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/> 
     <pre id="headerPre"> 
       Test Series 
     Cloud Solutions 
     </pre>     
     <hr id="headerHR"> 
    </div>        
     <div id="results"> 
     </div>  
</body>

CSS：

html, body { 
     margin: 0; 
     padding: 0; 
     height: 100%;      
    overflow: hidden; 
    } 
    body{ 
    position: relative; 
    } 
     #results{   
    width: 100%;   
    height: 100%; 
     position: absolute; 
     top: 150px; 
     left: 300px;  
     overflow: auto; 
     } 
     body{ 
     position: relative; 
     }    
     #headerDiv{  
      position: fixed; 
      top: 0; 
      width: 100vw;    
      //border-bottom: 3px solid #808080; 
     } 
     #headerHR{            
      width: 100%; 
      height: 1px; 
     } 
     #headerImg{ 
      float: left; 
      margin-top: 0px; 
      margin-left: 0px; 
     } 
     #headerPre{ 
      float: left; 
      font-family: "Arial", Helvetica, sans-serif; 
      font-style: normal; 
      font-weight: bold; 
      font-size: 24px; 
     }

的Javascript：

$('#results').load('https://fiddle.jshell.net/ds2vxqbg/1/show')

JavaScript中加載HTML文件中的代碼是：

<table border="1"> 
     <tr> 
     <th>Product no.</th> 
     <th>Product name</th> 
     <th>Product type</th> 
     <th>Product Description</th> 
     </tr> 
     <tr> 
     <td>1</td> 
     <td>Apple</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>2</td> 
     <td>Orange</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     <td>Pineapple</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>4</td> 
     <td>Pear</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>5</td> 
     <td>Plum</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
    </table>   
    <img src="" width = "800" height = "600"> 
    <img src="" width = "800" height = "600"> 
    <img src="" width = "800" height = "600"> 
    <img src="" width = "800" height = "600">

我已經在帶有ID結果的div標籤中加載了一個html頁面。雖然該div標記已啓用自動溢出，但滾動時不會顯示整個內容。請指出我有什麼問題。

來源

2016-06-13 Mat

您好！我試過你的JSFiddle，我可以滾動並看到div內的所有內容（我也仔細檢查了你正在加載的鏈接）。但是我認爲你的div是從'html，body'標記繼承'overflow：hidden;'，或者你從'html，body'中移除它，或者向div的CSS添加一個'！important'。 – Luke

還缺少什麼？我看到表格顯示在小提琴 – Roysh

上，如果你的意思是4個img標籤，我把一個邊框放在飛行廣告上我可以看到所有的4 – rick

#results由body {overflow:hidden;}中斷，因爲div將寬度和高度設置爲100％的身體，但它有額外的偏移量。

你可以嘗試下做：

HTML：

<body> 
    <div id="headerDiv"> 
     <img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/> 
     <pre id="headerPre"> 
      Test Series 
      Cloud Solutions 
     </pre>     
    <hr id="headerHR"> 
    </div> 
    <div id="wrapper"> <!-- add wrapper --> 
     <div id="results"></div> 
    </div> 
</body>

和css：

#wrapper { 
    padding-top: 150px; 
    padding-left: 300px; 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
} 

#results { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
}

來源

2016-06-13 15:52:55 Dekart

謝謝你的精彩作品... – Mat

div在html頁面中沒有完全顯示其內容

回答

相關問題