Question

我正在建立一个小网站。背景中充满了一张图片，比如地图。右侧是图片顶部的叠加层。叠加层有一个标题，下面有一个列表。

现在我无法让列表获得滚动条，如果它太大而无法放入屏幕。

我不希望页面滚动：背景填充屏幕100％。我不希望滚动完整的叠加层（注释掉第一个CSS注释以获得此值）。我之前也不知道标题的大小 - 如果我知道的话，那将很容易（简单地在CSS中注释掉第二条评论，并且嘿presto，有效）。我可以走很长的路，让javascript观看标题面板大小，但我宁愿有一个简单的CSS / html解决方案。

有什么想法吗？

代码：

<html>
<style>
div {
    font-size:1.5em;
    padding:10px;
    background-color:green;
}
html, body {
    height:100%;
    margin:0;
}
.panels {
    position:fixed;
    top:50px;
    right:50px;
    bottom:50px;
    /* overflow:auto; */
}
.list {
    /* position:absolute;left:10px;right:10px;top:150px;bottom:20px; */
    background-color:white;
    overflow:auto;
}

</style>

<div class='panels'>
    <div class='header'>Some title or other</div>
    <div class='list'>
        <ul>
            <li>Entry</li>
...lots of entries...
            <li>Entry</li>
        </ul>
    </div>
</div>
</html>

JSFiddle：http://jsfiddle.net/95ajc0us/

Answer 1

为第二个div添加高度：100％。

 .list {
    background-color:white;
    overflow:auto;
    height:100%;
  }

DEMO

Answer 2

scroll缺失，因为您有fixed panel，这会阻止div滚动

您需要fix header，而不是list

.header{
    position:fixed;
    width:100%;
    top:0;
}

demo

final edit （更新了Suresh Ponnukalai的答案）

Answer 3

如果您希望列表在向下滚动时向下滚动。

记下来：

ul{
overflow:scroll;
height: 200px;
}

表示您的UL（无序列表）

请随时再次询问我们不在同一页面.. 感谢

Answer 4

你已经修复了html和身体位置。

而是修复标题

的位置

.header{
    position:fixed;
    width:100%;
    left:0;
    top:0;
}

link

Answer 5

您需要调整顶部和底部属性以便尝试：

div
{
 font-size:1.5em;
 padding:10px;
 background-color:green;
}
html, body
{
 height:100%;
 margin:0;
}
.panels
{
 position:fixed;
 top:50px;
 right:50px;
 bottom:50px;  
}
.list
{
 position:absolute;
 left:10px;
 right:10px;
 top:150px;
 bottom:20px;
 background-color:white;
 overflow-y:scroll;
}

CSS：第二个<div>没有滚动条</div>

5 个答案: