Question

我试图完成一个简单的页面布局，页面顶部有一个页眉区域，页面底部有一个页脚区域，中间有一个大表格，有很多列和很多行。该表通常太大而无法放在视口上（宽度和/或高度明智），因此页面滚动条几乎总是存在（这很好）。

我想要的是页眉和页脚应用了max-width: 100% css属性，因此它们占据了视口宽度的100％。然后，当用户滚动页面以查看表格时，我希望页眉和页脚在视口（水平）中保持不变。页眉和页脚在垂直方向上很好，而且我不需要或不愿意＆＃34;坚持＆＃34;它们位于视口的顶部或底部。我只是想要它，所以当你向右水平滚动时，页眉和页脚会保持在视图中，而不是滚动到可视区域。

我真的想要一个CSS解决方案，但如果不可能，那么jQuery解决方案也可以工作。

这是一个显示我的问题的jsfiddle：https://jsfiddle.net/2krgecb4/

如果小提琴链接断开，这里是HTML：

<body>
<div class="header">
My Page Header Section
</div>
<table>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
    <tr><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td></tr>
</table>
<div class="footer">
My Page Footer Section
</div>
</body>

这是CSS：

.header, .footer {
  font-size: 2em;
  text-align: center;
  background-color: #ff9999;
  max-width: 100%;
}

td {
  min-width: 200px;
  background-color: #9999ff;
}

编辑：也许更好的方式来描述我想要的是说我希望页眉/页脚是内联元素，锁定到它们在y轴上的位置，但是＆＃34;锚定＆＃34;在视口的左侧。

Answer 1

经过几个小时的研究，我找不到任何方法可以使用纯CSS获得我想要的东西。看起来某些客户端脚本是使其工作的唯一方法。

我制作了页眉和页脚div元素position: relative;。这使div内联并允许您从通常的位置重新定位它。

#header, #footer {
  font-size: 2em;
  text-align: center;
  background-color: #ff9999;
  max-width: 100%;
  position: relative; /* KEY PROPERTY CHANGE */
}

td {
  min-width: 200px;
  height: 200px;
  background-color: #9999ff;
}

然后在滚动视口时使用一些脚本（jQuery）来修改left位置属性。

$(window).scroll(function () {
    $('#header').css({
        'left': $(this).scrollLeft()
    });
    $('#footer').css({
        'left': $(this).scrollLeft()
    });
});

如果你想看到它的作用，这是jsfiddle：

https://jsfiddle.net/2krgecb4/4/

注意：要在我的移动浏览器中使其工作，我必须禁用缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

如果有人有一个纯CSS解决方案仍然感兴趣！

在页面中定位页眉/页脚＆＃34;＆＃34;在中间的大桌子

1 个答案: