html - 如何让 HTML div 在水平方向上动态扩展以适应窗口宽度？

Question

完整源代码位于: http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeComponent.html

问题:有一个用于网页标题的 HTML div，最终包含一个表格，该表格具有左 Logo 、中心标题和右 Logo 的三列。我在 CSS 语句中将 div 宽度设置为“100%”，但 div 没有在水平方向上动态扩展以适应窗口的宽度。

简而言之，页面下方的 SVG Canvas 需要更宽的 div，我想让所有其他全宽 div 水平扩展以保持整洁。

div 代码如下:

  <div class="div_Header">
    <table class="table_Header">
      <tr>
        <td class="td_HeaderLeft"><img src="../../IMAGES/SITE_HEADERS/IF4IT_Logo.png" alt="Header Left Image" /></td>
        <td><img src="../../IMAGES/SITE_HEADERS/Title_Gold_Shadow.png" alt="Header Center Image" /></td>
        <td class="td_HeaderRight"><img src="../../IMAGES/SITE_HEADERS/NOUNZ_Logo_DarkBlueAndGold.png" alt="Header Left Image" /></td>
      </tr>
    </table>
  </div>

正在使用的 CSS 语句是:

  div.div_Header {
    width: 100%;
    border:2px solid White;
    border-radius:7px;
    background: WhiteSmoke;
    font: bold 14px Arial;
    font-family:Arial, Helvetica, sans-serif;
    color:WhiteSmoke;
    text-align:center;
  }

我已经尝试按照此 other SO post on the topic 中的建议添加“overflow: auto;” .但是，它似乎不起作用。

关于如何最好地解决这个问题有什么想法吗？

Answer 1

您需要将 body 元素上的填充和边距设为 0，以防止浏览器的 native 样式表应用这些属性，从而阻止您在 div 上拥有真正的 100% 宽度:

body {
    margin:0px;
    padding:0px;
}