html - 100% 宽度 = 视口(viewport)宽度。如何让它和页面正文一样宽？

Question

我的网站需要显示宽表。在它上面是标题，它应该和整个页面一样宽(在这种情况下，和表格一样宽)。但是，它的宽度与视口(viewport)(屏幕尺寸)一样宽，因此显示时看起来还不错，但是一旦用户滚动到侧面，他就会看到标题没有应有的那么宽。如何在不对值进行硬编码的情况下将此 header 拉伸(stretch)到整个页面宽度？

简单的例子:

HTML:

<div></div>
<table>
    <tr>
      <td>V</td>
      <td>e</td>
      <td>r</td>
      <td>y</td>
      <td></td>
      <td>w</td>
      <td>i</td>
      <td>d</td>
      <td>e</td>
      <td></td>
      <td>t</td>
      <td>a</td>
      <td>b</td>
      <td>l</td>
      <td>e</td>
   </tr>
</table>

CSS:

div {background-color: red;height:20px;width:100%;}
td {width: 100px;min-width:100px;}

Jsfiddle:http://jsfiddle.net/JXG5c/3/

Answer 1

修复实际上很简单；将表格和标题包装在 inline-block 中div .这样，包装 div占用尽可能多的空间，而不仅仅是视口(viewport)的空间。然后，您可以为 child 使用 100% 宽度 div ，这是你的标题。因此，您的新标记应如下所示:

<div id="parent">
    <div id="child"></div>
    <table>
        <tr><td>V</td><td>e</td><td>r</td><td>y</td><td></td><td>l</td><td>o</td> <td>n</td <td>g</td><td></td><td>t</td><td>a</td><td>b</td><td>l</td><td>e</td></tr>
    </table>
</div>

你的新 CSS 应该是这样的:

td {width: 100px;min-width:100px;}
#parent {display:inline-block;}
#child {background-color: red;height:20px;width:100%;}

所以真正需要做的就是父级必须包装表头和表格，并且您需要将其设置为inline-block。 , 瞧，你有一个全尺寸的标题。另外，请注意标题不会“固定”，它会随页面滚动，如果我正确解释了你的问题，是你想要发生的。

这是给你的 fiddle :http://jsfiddle.net/JXG5c/24/

更新:为什么这适用于 inline-block但不是 block ？

Block自动占用父级的所有空间。 header 的父项是视口(viewport)/正文，它自动为屏幕大小的 100%。

使用 inline-block ，但是，会导致 div 占用尽可能多的空间。把它想象成一个 <span>元素;它占用尽可能多的空间，不多也不少。然而，div s 不适用于 inline , 所以 W3C 的人做了 inline-block , 赋予 inline对任何block的行为元素。通过使用内联 block ，父 div 会自动适应子项的大小，即您的表格和标题。因此，表头的父级与表的大小相同，通过将表头设置为父级宽度的 100%，问题就解决了。 :)