CSS：第二个没有滚动条[英]CSS: Second does not get scroll bar 本文翻译自 Niels 查看原文 2014-08-29 312 css/

I'm making a small website. The background is filled with a picture, say, a map. On the right is an overlay on top of the picture. The overlay has a title, and a list below it.

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

Now I cannot get to have the list get a scrollbar if it is too large to fit in the screen.

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

I do not want the page to scroll: the background fills out the screen 100%. I do not want the complete overlay to scroll (comment out the first CSS comment to get this). I also do not know the size of the title beforehand - if I knew that, it would be easy (simply comment out the second comment in the CSS, and hey presto, works). I can go the long way, and have javascript watch the title panel size, but I'd rather have a plain CSS/html solution.

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

Any ideas?

Code:

<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/

5 个解决方案

#1

Add height:100% for the second div.

添加高度:第二个div为100%。

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

DEMO

#2

If you wish the list should scroll down in case of more entries.

如果您希望列表向下滚动以防更多条目。

Just write down :

记下来:

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

for your UL(Unordered list)

为您的UL(无序列表)

Please feel free to ask again we are not on same page.. Thanks

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

#3

you have fixed the html and body position.

你修复了html和body的位置。

instead fix the position of header

而是修复标题的位置

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

link

#4

You'll need to adjust the top and bottom properties to taste:

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

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;
}

#5

scroll is missing because you have a fixed panel, which will prevent the div from scrolling

滚动丢失,因为你有一个固定的面板,这将阻止div滚动

you need to fix header, not list

你需要修复标题,而不是列表

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

demo

final edit (updated fiddle on Suresh Ponnukalai answer)

最终编辑(Suresh Ponnukalai回答的更新小提琴)

#1