100%宽度=视口宽度.如何使它像页面体一样宽？

Question

我有需要显示宽表的网站.上面是标题,应该与整页一样宽(在这种情况下,与表格一样宽).然而,它只有视口(屏幕大小)宽,因此在显示时它看起来没问题,但是一旦用户滚动到侧面,他就会看到标题没有它应该的那么宽.如何在没有硬编码值的情况下将此标题拉伸到整页宽度？

简单的例子:

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占用了所需的空间,而不仅仅是视口的空间.然后,您可以使用孩子的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,而且,Voila,你有一个完整大小的标题.此外,请注意标题将不会"固定",它将滚动页面,如果我正确解释您的问题,这是您想要发生的.

这是你的小提琴:http://jsfiddle.net/JXG5c/24/

更新:为什么这有效inline-block但不是block？

Block自动占用父母的所有空间.标题的父级是视口/正文,它自动为屏幕大小的100%.

inline-block但是,使用会使div占用尽可能多的空间.把它想象成一个<span>元素; 它占用了必要的空间,不多也不少.但是,divs不能很好地工作inline,所以W3C的人员制作了inline-block,它赋予inline任何block元素行为.通过使用内联块,父div自动适合子项的大小,即子表和标题.因此,标题的父级与表的大小相同,并且通过将标题设置为父级的宽度的100%,问题得以解决.:)