100%宽度=视口宽度。如何使其与页面主体一样宽？

Question

100%宽度=视口宽度。如何使其与页面主体一样宽？

6

我是一个有用的助手，可以将文本翻译成中文。

我有一个网站，需要显示宽表格。在其上方是标题，应该与整个页面一样宽（在这种情况下，与表格一样宽）。但是，它只有视口（屏幕尺寸）宽，因此在显示时看起来很好，但是一旦用户向两侧滚动，他会发现标题不如应该那样宽。如何将此标题拉伸到全页宽度而不硬编码值？

简单示例：

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: {{链接1：http://jsfiddle.net/JXG5c/3/}}

- gadelat

3个回答

4

你有没有考虑将标题设为固定位置？ JSFiddle

body {
    padding-top: 20px;
}
div {
    background-color: red;
    height:20px;
    width: 100%;
    position: fixed;
    top: 0;
}
td {
    width: 100px;
    min-width:100px;
}

更新如果您想保留标题的垂直滚动，请使用以下jQuery代码段：

$(window).scroll(function(){
  $('div').css('top',-$(window).scrollTop());
});

JSFiddle

更新

这里还有一种更简单的方法，但我认为上述方法对你来说更好，至少如果你无法编辑表格输出的话。

JSFiddle

- Markus Kottländer

小心。使用此解决方案，当您滚动页面时，页眉将保持在同一位置。 - Andrew Surzhynskyi

不错的技巧，将div插入表格中。我给你点赞 :D - Andrew Surzhynskyi

该死。我很感激你的帮助，但我不能有固定的页眉，这个问题只能用CSS和HTML解决，最后的解决方案等同于使用表格制作整个页面布局。在现代时代，这是不可取的。但我承认我没有明确禁止使用表格进行布局，所以如果没有更好的解决方案，我将接受这个答案。 - gadelat

0

试试这个，我认为它应该可以工作 http://jsfiddle.net/JXG5c/15/

 body {padding-top: 20px;}
div {background-color: red;height:20px;width: 100%;position: fixed;top: 0;}
td {width: 100px; min-width:100px;}

- user3076482

编辑后，确实可以实现，但这与将页眉固定在页面顶部的解决方案相同。 - Andrew Surzhynskyi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shrey Gupta · Accepted Answer

修复实际上非常简单; 使用inline-block div将表格和标题包装起来。这样，包装的 div将占用所需的空间，而不仅仅是视口的空间。然后，您可以为子div使用100％的宽度，即标题。因此，您的新标记应该类似于：

<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 会自动占据父元素的所有空间。您的标题的父元素是视口/正文，它自动占据屏幕大小的 100%。

然而，使用 inline-block 会导致 div 占用所需的空间。可以将其视为 <span> 元素；它只占用所需的空间，不多也不少。但是，div 不适用于 inline，因此 W3C 的工作人员创建了 inline-block，它赋予任何块级元素 inline 行为。通过使用 inline-block，父 div 自动适合子元素的大小，这些子元素是您的表格和标题。因此，标题的父元素与表格的大小相同，通过将标题设置为父元素的宽度的 100％，问题得以解决 :)