Question

我正在根据菜单栏中的点击将html文件加载到内容div中。 HTML包含5个表但由于某种原因div只显示第一个表的前5行，那么您需要一个滚动条来查看其余表。我希望在单个视图上看到所有表，如果信息超出屏幕，则只有滚动条。任何建议都会有帮助。我试图在div上将宽度和高度设置为100％，但这不起作用。当我单独查看表格时，它看起来就像我想要的那样。

感谢您的帮助。

＆＃13;

function load_codes() {
  document.getElementById("content").innerHTML = '<object type="text/html" data="codes2.html" ></object>';
}

function load_mrgsql() {
  document.getElementById("content").innerHTML = '<object type="text/html" data="mergesqlcode.html" ></object>';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
  <h2>Sidebar</h2>
  <p>Open Merge Analysis WorkBook</p>
  <p>
    <a href="#" onclick="load_mrgsql()">Open Merge Analysis SQL file</a>
  </p>
  <p>
    <a href="#" onclick="load_codes()">Common Merge Code List</a>
  </p>
  <p>Merge Analysis Statistics</p>
  <p>My Statistics</p>
</div>


<div id="content" style="height: auto; width:auto; min-height:100%; display: block; overflow: auto;">
  <h1>Merge Analysis Tracking</h1>
  <p>Welcome to the Merge Analysis Tracking Tool</p>

  <p>Look around</p>

</div>


<!-- HTML with Tables (only 2 shown) -->

<body>
  <table class="table">
    <thead>
      <tr>
        <th colspan="3">Case Close Codes</th>
      </tr>
    </thead>
    <tr>
      <td>BFU</td>
      <td>BIOLOGICAL FATHER UNKNOWN</td>
    </tr>
    <tr>
      <td>DGC</td>
      <td>IV-D GOOD CAUSE</td>
    </tr>
    <tr>
      <td>DNO</td>
      <td>NCP DECEASED</td>
    </tr>
    <tr>
      <td>ERR</td>
      <td>CASE ENTERED IN ERROR</td>
    </tr>
    <tr>
      <td>FOR</td>
      <td>FOREIGN</td>
    </tr>
    <tr>
      <td>INC</td>
      <td>INCARCERATED, INSTITUTIONALIZED, MEDICAL</td>
    </tr>
    <tr>
      <td>JNC</td>
      <td>INITIATING JURISDICTION NON COOPERATION</td>
    </tr>
    <tr>
      <td>LCO</td>
      <td>LOCATE ONLY</td>
    </tr>
    <tr>
      <td>LOC</td>
      <td>LOSS OF CONTACT</td>
    </tr>
    <tr>
      <td>NCA</td>
      <td>NO CURRENT ORDER/ARREARS
        <$500</td>
    </tr>
    <tr>
      <td>NCO</td>
      <td>NON-COOPERATION</td>
    </tr>
    <tr>
      <td>P21</td>
      <td>PATERNITY 21</td>
    </tr>
    <tr>
      <td>PBI</td>
      <td>PATERNITY BEST INTEREST</td>
    </tr>
    <tr>
      <td>PEX</td>
      <td>PATERNITY EXCLUDED</td>
    </tr>
    <tr>
      <td>QLO</td>
      <td>QUICK LOCATE ONLY</td>
    </tr>
    <tr>
      <td>RSC</td>
      <td>RECIPIENT OF SERVICES REQUEST CLOSURE</td>
    </tr>
    <tr>
      <td>UL1</td>
      <td>UNABLE TO LOCATE 1 YEAR</td>
    </tr>
    <tr>
      <td>UL3</td>
      <td>UNABLE TO LOCATE 3 YEARS</td>
    </tr>
  </table>
  <table class="-table">
    <thead>
      <tr>
        <th colspan="4">Relationship Codes</th>
      </tr>
    </thead>
    <tr>
      <td>01</td>
      <td>SELF</td>
    </tr>
    <tr>
      <td>02</td>
      <td>SPOUSE</td>
    </tr>
    <tr>
      <td>05</td>
      <td>CHILD</td>
    </tr>
    <tr>
      <td>06</td>
      <td>GRANDCHILD</td>
    </tr>
    <tr>
      <td>07</td>
      <td>NEPHEW OR NIECE</td>
    </tr>
    <tr>
      <td>08</td>
      <td>SIBLING</td>
    </tr>
    <tr>
      <td>09</td>
      <td>FIRST OR SECOND COUSIN</td>
    </tr>
    <tr>
      <td>10</td>
      <td>OTHER RELATIVE</td>
    </tr>
    <tr>
      <td>13</td>
      <td>UNBORN</td>
    </tr>
    <tr>
      <td>15</td>
      <td>STEP CHILD</td>
    </tr>
    <tr>
      <td>16</td>
      <td>STEP GRANDCHILD</td>
    </tr>
    <tr>
      <td>17</td>
      <td>STEP NEPHEW OR NIECE</td>
    </tr>
    <tr>
      <td>18</td>
      <td>STEP BROTHER OR SISTER</td>
    </tr>
    <tr>
      <td>19</td>
      <td>OTHER SPECIFIED RELATIVE</td>
    </tr>
    <tr>
      <td>20</td>
      <td>ATTORNEY</td>
    </tr>
    <tr>
      <td>27</td>
      <td>OTHER</td>
    </tr>
    <tr>
      <td>28</td>
      <td>FATHER</td>
    </tr>
    <tr>
      <td>29</td>
      <td>ALLEGED FATHER</td>
    </tr>
    <tr>
      <td>30</td>
      <td>STEP FATHER</td>
    </tr>
    <tr>
      <td>31</td>
      <td>GRAND FATHER</td>
    </tr>
    <tr>
      <td>32</td>
      <td>MOTHER</td>
    </tr>
    <tr>
      <td>33</td>
      <td>STEP MOTHER</td>
    </tr>
    <tr>
      <td>34</td>
      <td>GRAND MOTHER</td>
    </tr>
    <tr>
      <td>35</td>
      <td>SISTER</td>
    </tr>
    <tr>
      <td>35</td>
      <td>SISTER</td>
    </tr>
    <tr>
      <td>36</td>
      <td>AGENCY</td>
    </tr>
    <tr>
      <td>36</td>
      <td>AGENCY</td>
    </tr>
    <tr>
      <td>37</td>
      <td>AUNT</td>
    </tr>
    <tr>
      <td>37</td>
      <td>AUNT</td>
    </tr>
    <tr>
      <td>38</td>
      <td>UNCLE</td>
    </tr>
    <tr>
      <td>38</td>
      <td>UNCLE</td>
    </tr>
    <tr>
      <td>39</td>
      <td>BROTHER</td>
    </tr>
    <tr>
      <td>39</td>
      <td>BROTHER</td>
    </tr>
    <tr>
      <td>40</td>
      <td>ADOPTED CHILD</td>
    </tr>
    <tr>
      <td>40</td>
      <td>ADOPTED CHILD</td>
    </tr>
    <tr>
      <td>99</td>
      <td>UNKNOWN</td>
    </tr>
    <tr>
      <td>99</td>
      <td>UNKNOWN</td>
    </tr>
  </table>

＆＃13;

Answer 1

如果我理解你的问题，你想让对象拥有它的全高，而不是显示滚动条，而不是相反。

如果是这样，你应该能够做到这样的事情：

function load_codes() {
  let elem = document.getElementById("content")
  elem.innerHTML = '<object type="text/html" data="codes2.html" ></object>';
  elem.onload = function(e) {
      elem.style.height = e.contentWindow.document.body.offsetHeight;
  }
}

那应该得到你需要的东西。您可能需要执行额外的css来删除对象的边框。

从另一个div

1 个答案: