1

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

我的问题是我有一些嵌套表，我将一个列放在一个 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 建议的内容，因为它提供了与页面中其他内容的明确隔离。

4

2 回答 2

2

将 div 的样式属性下的高度设为 100%，这样它将遵循其父级的最大高度，即td在您的情况下。如果您希望内容水平和/或垂直滚动​​，您还可以包括“溢出：滚动”。

于 2013-01-14T08:39:56.743 回答
1

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

HTML：

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

CSS：

.container{  
    height: 123px;
    overflow: scroll;    
}
于 2013-01-14T07:10:13.090 回答