Question

我有一个带有DIV和TABLE的页面。 DIV是我的标题，即使显示水平滚动条，我希望它是100％宽度。由于某种原因，它只占可见窗口的100％。

我的HTML代码是：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<body>

    <div style="background-color:yellow;">100% DIV</div>

    <table style="width:100%; background-color:orange;">
        <thead>
            <tr>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
            </tr>
        </thead>
    </table>

</body>
</html>

＆＃13;

当我向右滚动时，DIV不会使用所有宽度：

如何让DIV占据页面宽度的100％？理想情况下，我不想更改TABLE，因为它是生成的代码。

Answer 1

没有办法（完全动态地 - 没有固定任何宽度 - 并且使用纯CSS - 没有JavaScript）来获得块级元素以通过块级继承兄弟块级元素的宽度父元素。

解决方法是将display: inline-block放在父元素上，因为内联块从其最宽的子元素计算其width属性。

在您的情况下，不要将display: inline-block放在body元素上。我建议将100% div和table元素包装在另一个包装元素中，因此：

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="wrapper" style="display: inline-block; min-width: 100%;">
    <div style="background-color:yellow;">100% DIV</div>
    <table style="width:100%; background-color:orange;">
      <thead>
        <tr>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
        </tr>
      </thead>
    </table>
  </div>
</body>
</html>

此外，将min-width: 100%放在包装器元素上会使其在更大的屏幕尺寸上模仿display: block的元素。

Answer 2

实际上table标记已溢出，因此请尝试将100%提供给其父级和div。如果它不能正常工作请给我一个jsfiddle网址

使用滚动条

2 个答案: