HTMLページ内のdivの内容が完全に表示されない

-1

JSFiddleで次のコードを記述しました。 https://jsfiddle.net/msridhar/1zvhmpjq/11/ HTMLファイル：HTMLページ内のdivの内容が完全に表示されない

<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は、divの幅と高さを100％に設定しているため、オフセットが追加されているため、body {overflow:hidden;}で切り捨てられます。

あなたは次に何をしようとすることができます：

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

HTMLページ内のdivの内容が完全に表示されない

答えて

関連する問題