如何在绝对div中创建具有溢出的ul

时间:2015-06-24 15:31:32

标签: html css position html-lists absolute

我是一名三年级学生,现在是一名前端Web开发人员实习生。 我在这里写的内容似乎是不必要的或明显的,但我知道我这样做是不谦虚的。 我认为提高自己的最好方法是分享东西,事件是最小的事情。

经过一番研究后,我必须自己找到答案,所以也许这对初学者来说有助于父母/孩子如何以绝对的位置工作!

我用html / css试验了一个简单但有问题的案例。

我必须制作一个包含UL的div position: absolute;。在这个UL内部,每个LI都会根据点击显示一个巨大的文本。

我遇到的问题是让这个文本可滚动。因此,我知道亲戚和绝对孩子之间的关系,但我不知道这个孩子的孩子会发生什么。

事实上,我的孩子div适合父母,但Ul(孩子的孩子)并没有做我想做的事情!

以下是我的第一个:https://jsfiddle.net/5ooxkhrv/3/

1 个答案:

答案 0 :(得分:1)

正如你所看到的,我花了一些时间才弄清楚我的UL孩子也必须处于绝对位置,身高100%。

以下是决赛:https://jsfiddle.net/5ooxkhrv/2/

ul {
  position: absolute;
  height: 100;
  overflow-y: auto;
}

嗯,我的英语非常糟糕,我希望我的文字不会太难读。 我的目的很简短,我希望它会有所帮助。

如果您正在使用包含3列的常见问题解答页面,此示例非常适合。 (col1:topic,col2:question,col3:answer)。

如果人们可以做出贡献,我很乐意,例如,解释为什么孩子必须绝对。 如果这个主题没用,请随意将其删除!

感谢您的阅读。