Question

我在JSFiddle中编写了以下代码。 https://jsfiddle.net/msridhar/1zvhmpjq/11/ 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">

我在div标签中加载了一个带有id结果的html页面。尽管div标签已启用auto auto，但滚动时并未显示整个内容。请指出我是什么问题。

Answer 1

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

html页面中的div没有完全显示其内容

1 个答案: