Question

我有一个包含几个div的页面，有点像这样：

<div id="content">
  <div id="topDIV" style="background-color: #0000C9; position:absolute; width:100%; top:0px; left:0px; height:44px;">
    <table cellpadding="0" cellspacing="0" border="0" style="height:44px; width:100%;">
      <tr><td>header div<td></tr>
    </table>
  </div>
  <div id="mainTableDIV" style="background-color: #f00; padding: 10px; position:absolute; top:44px; left:0px;">
   <table cellspacing=0 cellpadding=0 border=0 style="width:1400px;height:800px">
     <tr><td><td></tr>
   </table>
  </div>
</div>

所以第二个div（mainTableDIV）通过AJAX请求填充，宽度设置为大约1400px取决于数据。所以，当我缩小浏览器，这个宽度我看到水平滚动条。当我滚动到右边第一个div（topDIV），这是一个标题div没有扩展到与第二个div相同的宽度。如何让第一个标题div与第二个宽度的宽度始终相同？

Answer 1

将它们包装在自己的div标签中

<div id='content'>
    <div id="div_one" style="width:100%;">
        <table width=100%...>
            ...
        </table>   
    </div>
    <div id="div_two" style="width:100%;>
        <div id="data_div"></div>
    </div>
</div>

首先，处理div时不需要宽度：100％（只要没有浮点数）。 div将在其放置的区域中自动填充。因此，如果内容2超出内容1的大小，只要整个内容容器上没有RESTRICTION，就宽度而言，内容1将增长到符合内容2。

Answer 2

你在陌生的地方有一些引用，尝试修复它们应该有效。除此之外，如果您使用CSS来设置这些div的样式，那就更清楚一点了：

<强> HTML：

<div id="div_one" class="divider"></div>
<div id="div_two" class="divider"></div>

<强> CSS：

.class { 
    width: 100%;
}

这是你要找的吗？

如何将第一个div扩展为与第二个div宽度相同的宽度

2 个答案: