垂直和水平位置粘贴

我很难得到一个例子，坚持垂直和水平

所以我能够得到表头坚持。我试图让页眉和页脚粘在一起，而不是水平滚动时移动

这是一个演示的链接。

aside {
width: 200px;
position: fixed;
height: 100vh;
background: red;
}
main {
margin-left: 220px;
background: beige;
}
header {
height: 100px;
background: teal;
position: sticky;
left: 220px;
}
th {
position: sticky;
top: 0;
background: aqua;
}
footer {
background: green;
height: 2000px;
} 
<html>
<body>
<aside>aside</aside>
<main>
<header>
header
</header>
<table>
<tr><th>Test</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
</table>
<footer>
</footer>
</main>
</body>
</html>

基本上不能用纯CSS来完成。

需要的是一个滚动容器内的不同元素上的sticky-x和sticky-y，但是没有这样的东西。

页眉和页脚不粘，因为他们需要一个包含块和滚动容器。如果你在"main"周围放了一个"container"，并使用CSS(使用classes):

.container {
margin-left: 220px;
}
.main {
background: beige;
overflow-x: auto;
}

它应该解决这个问题，但粘在表头将停止工作。(页脚也需要添加position: sticky)

你可能会得到一个特定的解决方案，为一个特定的布局使用定位或网格，当然使用javascript，但要做到这一点，你需要准确地建议何时以及如何你想要的表结构滚动相对于其他元素。

我想出了一个解决方案。

我必须使用calc和z-index的组合来得到我需要的东西。我还必须确保布局组件中没有空格。

这是链接。

* {
margin: 0;
padding: 0;
background: #ccc;
box-sizing: border-box;
-webkit-border-horizontal-spacing: 0;
-webkit-border-vertical-spacing: 0;
}
body {
overflow-y: scroll;
}
aside {
width: 200px;
position: fixed;
height: 100vh;
background: red;
z-index: 50;
}
main {
margin-left: 200px;
background: #556B2F;
width: min-content;
}
header, footer {
height: 100px;
position: sticky;
left: 200px;
width: calc(100vw - 200px - 15px); //15px is width of the scrollbar
}
th:first-child, td:first-child {
position: sticky;
left: 200px;
}
td:first-child {
padding-left: 5px;
z-index: 10;
background: white
}
th:first-child {
padding-left: 5px;
z-index: 30;
}
th {
position: sticky;
top: 0;
background: aqua;
z-index: 20;
}
footer {
height: 2000px;
}

相关内容

最新更新

热门标签：