Question

我正在处理旧代码，因此我无法进行更多结构更改（例如删除表格），因此请在回答时请记住这一点。

我的问题是我有一些嵌套表，我在列中放置了一个div。 div我填充了复选框和标签，使用JavaScript动态创建，具体取决于查询结果（使用AJAX制作）。问题是DIV越来越大，以适应内容，这就搞乱了我的整个布局。

<table border = "0" width="470px">
  <tr>
    <td height="10px">
      <table>
    <tr>
          <td width="200px">                                    
        <font class="section_font">
          <label id="feedbackLabel">Metadata name:</label>
        </font>
      </td>
      <td align="right" width="170px">
         <font class="section_font">
          <input id="selAllCheckbox" type="checkbox" onclick="doSelectAll()">
              <label id="selAllCheckboxLabel">Select all</label>
         </font>
           </td>
    </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="100px">
      <div id="metadata_names" style="overflow:auto; border: 0px solid gray">
      </div>
    </td>
  </tr>
</table>

PS。我找到了一个解决方法：在div中添加新对象后，我再次调整DIV的大小：myDiv.style.height =“100px”; 不管怎样，谢谢，我也会尝试你的解决方案。

PS1。这两种方案都有效但是，我将使用Umesh建议的内容，因为它提供了与页面中其他内容的明确隔离。

Answer 1

在div的样式属性下设置高度 - 100％因此它将遵循它的父级的最大高度，即你的情况下的 td 。如果您希望水平和/或垂直滚动内容，还可以包含“overflow：scroll”。

Answer 2

使用div容器并为其指定一个类。确保在此div中填充日期。然后使用CSS为其指定一个固定的高度。

<强> HTML：

<div class="container"> 
    <!-- Your data -->
</div>

<强> CSS：

.container{  
    height: 123px;
    overflow: scroll;    
}

Div高度固定

2 个答案: