logo标签列表

使用CSS/HTML创建“冻结窗格”效果

htmlcss
5

是否有可能/容易创建一个网页，它可以像Microsoft Excel电子表格一样应用‘冻结窗格’？这意味着标题和侧边栏应该保持固定位置，但当页面滚动时应该向下/向右滚动。

我需要类似于这个的东西，只不过我想把它应用到整个页面而不是一个表格。

可能是['可滚动'区域和在网站中的'不可滚动'区域]的重复问题。 - sandeep
这不是我需要的。我想要的是一个固定的页眉，可以向右滚动，以及一个固定的左侧边栏，可以向下滚动。我使用Excel中固定窗格的类比，因为这正是我想要的工作方式。 - Mat Richardson
我现在看到了你的问题，但是你的“this”链接已经失效了！你能直接将你的“this”插入到你的问题中吗？ - schlebe
6个回答
9
这可以通过在CSS类中使用position: fixed指令来完成。
例如，一个带有该类的div。
#fixed-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #000;
}

当您滚动时，此元素将保持固定在浏览器视口的最上方100px处。

此示例演示了垂直和水平方向上的效果。 http://jsfiddle.net/ukzYf/1/

希望这可以帮助到您。

3

你是否在寻找 position: fixed？

这里有一个简单的工作示例：

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    background: red;
    width: 100%;
}
.sidebar {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100px;
    background: blue;
    height: 100%;
}
.content {
    margin: 50px 0 0 100px;
    padding: 10px;
    width: 2000px;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.<br>
    Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.
    Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.<br>    
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.<br>
    Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.<br>
    Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.<br>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.
</div>

这差不多就是了。我有一个Excel工作簿，保存为Web文档。工作簿中的电子表格在B列第3行处有一个冻结窗格。第3行以下的所有内容都可以垂直滚动，B列右侧的所有内容都可以水平滚动。第4行及以下的A列和B列不会向左或向右滚动，B列右侧的第1、2和3行不会向上或向下滚动。第1、2和3行的A列和B列根本不会滚动。这就是我想要复制的内容，但Excel没有包含CSS或HTML来实现这一点。手动编辑文件很困难，但如果我知道该怎么做，就可以完成。 - WayneCa
2
1

众所周知，CSS 规则

position: fixed;

通常应用于表头的CSS样式会将其与表格的tbody部分中相应的列之间的匹配关系打破，因为它会将目标HTML元素从DOM正常流中“分离”，使其作为独立元素进行操作。这意味着，如果任何一个td元素中的表格正文被编辑，并且相应列的宽度根据新文本长度而变化，thead就无法与其保持同步，导致列对齐出现问题。

要解决这个问题，您需要为每一列添加固定宽度，以防止由于列错位而导致布局混乱。

因此，我想提供另一种没有这种缺点的CSS解决方案：

.stickyClass > th
{
  position: sticky;
  top: 0;
}

请插入以下代码。
class = "stickyClass"

将其插入到您要定位的HTML tr元素中。

它是如何工作的？ 它将使所有嵌套的th元素（标题单元格）像往常一样运行，直到达到第二个CSS规则指示的滚动顶部（可以设置与0不同的值以匹配您的需求）。在滚动量之后，该元素会改变其行为并充当固定元素。粘性规则的优点在于它保持thead-tbody列宽度对应，因此即使编辑td内容文本并更改列本身的宽度，表格布局也不会破裂。因此，在弹性表格布局中使用它是一个很好的选择。

如果您有一个包含表格和其他内容的长文档，使用固定的CSS解决方案可以使表头保持可见，即使其他内容与其没有适当的关系。换句话说，表的固定元素保持固定且不可滚动，即使该特定表格不再是屏幕上可见的元素，因为滚动页面本身超出了表格边界。
粘性方法没有这个缺点，因为粘住的元素只在相关表格（主父元素）在屏幕上可见时保持可见。一旦相对表格滚动并且不再可见，粘住的头部元素会相应地消失。因此，您可以在同一页中拥有不同的内容（普通文本、段落、图像，甚至更多不同的表格），而不会创建任何混乱的元素，这些元素在不需要时仍然可见。当然，使用JS可以修复“固定”解决方案的这种不良行为，但“粘性”解决方案更简单易行，并且即使浏览器关闭了JS，它也可以起作用。
在这里，您可以查看浏览器支持情况：https://caniuse.com/#feat=css-sticky

缺点：不幸的是，粘性CSS规则不能直接在thead和tr元素上工作（仍然存在一些小问题），因此您需要将其对准th子元素，在类名后添加> th。

这意味着这个答案并不能代替这个主题中的其他答案，而是将它们集成在一起，让您选择最适合自己需求的答案。

0
我使用这个：
tbody{
  overflow-y: auto;
  height: 350px;
  width: 102%;
}
thead,tbody{
    display: block;
}

我使用Bootstrap CSS的col-md-xx定义列的宽度。如果不定义列宽，那么自动宽度无法匹配。102％是因为溢出会导致一些空间丢失。

0
我相信您正在寻找类似于这个固定布局示例的东西。
如果是这样，请查看此处的代码和教程：

我们可以使用CSS position属性使HTML元素固定。同时，为了使元素固定，我们需要至少提供一个从上、左、下、右中选择的坐标点。下面是制作固定位置元素的语法。在以下提供的示例中，我使用了固定位置的div来在窗口滚动时显示元素。

.fixed_elements{
    position:fixed;
    top:100px;
}
4
你好 bPratik，Stack Overflow 的答案旨在成为多年来的知识资源。如果你提供的链接失效了，你的答案就会变得无用。我将链接中的一些信息添加到你的帖子中，以帮助使其更有用，并点赞了你的帖子以应对链接回答被贬低的情况。在将来，考虑在你的回答中提供更多的背景信息，以避免链接失效。如果你认为可以进一步改进，请随时进行编辑。祝好运！ :) - jamesmortensen
谢谢@jmort253，我本来想在发布元帖后修复这个问题，但是被其他事情分心了！不过还是感谢你的努力！ - bPratik
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接