可变宽度页眉滚动页面高度

Question

我有一个ul这是页面的高度。我希望它能够在该ul内滚动。这可以看这里：http://d.saew.it/pRyz

正如你所看到的，它可以作为页面的高度滚动。现在，我也希望它有一个标题，正如你可以在那里看到的那样。它应该是“固定”在顶部，但列表的宽度是可变的，因此我不能将其设置为固定的，因为它不能在变量宽度的父级中居中。现在

，我有什么近乎完美的作品，除了一个事实，即ul的height: 100%是父（与窗口）的高度，而div头仍然占用空间上面。因此，这将抛出父元素末尾的几个像素。检查出来：http://d.saew.it/NXL1

有没有完成我想要的纯CSS的方法吗？

编辑：

的代码是手写笔，但任何人都应该仍然能够阅读：

div.ul-header 
    background-color #E6E6E6 
    text-align center 
    margin 0 
ul 
    background-color #E6E6E6 
    height 100% 
    margin 0 
    overflow-x hidden 

这些元素的所有的父母对他们height: 100%;允许其到达窗口高度。

Answer 1

我不完全清楚你想要什么，但this是我最好的猜测。

基本上你在做什么是使用绝对定位和溢出规则来控制什么样的卷轴，以及它出现在哪里。

容器装有两个头和滚动列表，并具有网页体内height: 100%。它也有position: relative，以便它的子元素可以绝对定位。

子元素 - 标题和名单 - 都有position: absolute。这样可以强制列表的高度既受限制（因此它的内容溢出）和变量（根据其父项的高度），也就是说，它应该总是恰好与其父项的高度相比减去标题。请注意，其top属性的值需要对应于合计标题的高度 - 包括填充和边框。

然后让你的滚动列表，你可以在列表中使用overflow: auto。

要获得头你的文本居中是text-align: center，将工作无论容器的宽度一样简单。