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

【问题标题】：How to get an HTML div to dynamically expand in a horizontal direction to fit window width?如何让 HTML div 在水平方向上动态扩展以适应窗口宽度？
【发布时间】：2015-02-21 21:28:11
【问题描述】：

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

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

简而言之，页面下方的 SVG 画布需要更宽的 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;”。但是，它似乎不起作用。

对如何最好地解决此问题有任何想法吗？

【问题讨论】：

100% DIV width is not really 100%的可能重复
您提供的链接没有显示如何实际解决问题的任何选项，因此除了解释 100% div 宽度不是 100% 之外，它毫无用处。解决上述问题的方法是什么？
除非你对 Web 开发一无所知，否则很明显你需要将 html 和 body width 都设置为 100%。
我尝试添加："html, body { margin: 0px; padding: 0px; width: 100%;}" 但失败了。我刚刚重新发布了带有此更改的新代码，因此您可以亲眼看到您的建议不起作用。
一个很好且非常古老的建议。不要使用tables 进行页面布局。这是 90 年代中期遗留下来的。

标签： html css

【解决方案1】：

您需要将 body 元素上的内边距和边距设为 0，以防止浏览器原生样式表应用那些阻止您在 div 上获得真正 100% 宽度的属性：

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

【讨论】：

嗯，从我在您的网站上看到的应该可以，当您尝试它时发生了什么？
完全没有改变。
我重新发布了新代码，以防您想亲自查看。
知道了，我第一次误解了这个问题。您的问题是由于在div.div_Body 上设置的width:100%; 将其设置为主体宽度的100% 但由于它位于td 中，而tr 与其他内容一起导致您的问题页面拉伸到超过 100% 的宽度。

【解决方案2】：

本文部分解释了实际答案，标题为：“Using CSS "Display: table-cell" for columns”。但是，它也没有涵盖完整的答案。下面的代码包含完整的答案并且已经过测试。

答案的第一部分是确保给整个html和body信封一个baseline...

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

答案的第二部分是创建一个全宽 div，它将充当子 div 的容器。如上篇文章所述，应使用“display: table;”属性告诉包含 div“像 HTML 表格元素一样工作”...

div#div_header_container {
  background: ' + headerBackgroundColor + ';
  border:2px solid ' + 'White' + ';
  border-radius:7px;
  width: 100%;
  display: table;
  vertical-align: middle;
}

第三，每个子 div（在本例中为 3 个）应该被赋予一个占父容器百分比的宽度。而且，由于父容器被告知要像 HTML 表格元素一样工作，因此应该使用“display: table-cell;”告诉这些子 div 像表格单元格一样工作。属性。还应该使用“vertical-align: middle;”属性将它们设置为在中间垂直对齐元素，确保每个子 div 中的每个图像都将沿着它们的中间对齐。

div#div_header_left {
  width: 20%;
  border-radius:7px;
  display: table-cell;
  vertical-align: middle;
}
div#div_header_center {
  width: 60%;
  border-radius:7px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
div#div_header_right {
  width: 20%;
  border-radius:7px;
  display: table-cell;
  vertical-align: middle;
}

最后，将位于每个子 div 中充当表格单元格的图像应与 div 本身分离，并应给予适当的对齐方式...

img.image_header_left {
  float: left;
}
img.image_header_center {
  text-align: center;
}
img.image_header_right {
  float: right;
}

应用后，dom 的源代码将如下所示：

<body>
  <div id="div_header_container">
    <div id="div_header_left">
        <img class="image_header_left" src="./Logo_Left.png" alt="Header Left Image" />
    </div>
    <div id="div_header_center">
        <img class="image_header_center" src="./Logo_Center.png" alt="Header Center Image" />
    </div>
    <div id="div_header_right">
        <img class="image_header_right" src="./Logo_Right.png" alt="Header Right Image" />
    </div>
  </div>
</body>

【讨论】：