0

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

如您所见，它可以随着页面的高度滚动。现在，我还希望它有一个标题，如您所见。它应该在顶部“固定”，但ul列表的宽度是可变的，因此我不能将它设置为固定，因为它不能在可变宽度的父级中居中。

现在，我所拥有的工作几乎完美，除了 的height: 100%是ul父级的高度（与窗口相同），而div标题仍然占用它上方的空间。因此，这会ul从父元素的末尾抛出几个像素。看看：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%;允许它达到窗口的高度。

4

1 回答 1

0

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

基本上你正在做的是使用绝对定位和溢出规则来控制滚动的内容和出现的位置。

该容器包含标题和可滚动列表，并包含height: 100%在页面正文中。它还具有position: relative使其子元素可以绝对定位的功能。

子元素 - 标题和列表 - 都具有position: absolute. 这样您就可以强制列表的高度既受限制（因此其内容溢出）又可变（根据其父级的高度），即它应该始终与其父级的高度完全相同，减去标题。请注意，其top属性的值需要对应于标题的总高度——包括填充和边框。

然后要获取您的滚动列表，您可以overflow: auto在列表中使用。

要在标题中获得居中文本就像 一样简单text-align: center，无论容器的宽度如何，它都可以使用。

于 2012-09-14T17:39:49.397 回答