具有固定高度的 Div答案

【问题标题】：Div with fixed height具有固定高度的 Div
【发布时间】：2012-12-28 04:13:06
【问题描述】：

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

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

【问题讨论】：

你想做什么？让 div 变大而不影响其他元素？使用float:left 或overflow:scroll。
没有。无论我在其中放入多少对象，我都需要我的 DIV 具有固定的高度。

标签： javascript html ajax html-table

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

HTML：

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

CSS：

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

【讨论】：