Question

我正在创建一个包含可点击内容的网站，该网站会弹出固定宽度的DIV以及更多信息。此信息可能很长，需要在静态背景上垂直滚动。（例如Pintrest）。我已经完成了基本的滚动操作，但是我无法确定如何设置内容DIV的高度，以便正确地包装所有内容。目前，内容只是从DIV的底部流出。

我在这里将其简化为一个简单的例子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Scroller Test</title>
  <style>
    * {
     margin: 0;
    }
    html, body {
      height: 100%;
      background-color: #7A7A7A;
      overflow: hidden;
    }
    #scroller {
      position: fixed;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      overflow-x: none;
      overflow-y: scroll;
    }
    .infobox {
      position: absolute;
      top: 0px;
      left: 100px;
      width: 525px;
      height: 100%;
      z-index: 100;
      background-color: #fff;
      overflow: visible;
      display: block;
      padding: 0;
      margin: 50px 0px 50px 0px;
    }
    .infobox-content {
      position: absolute;
      width: 475px;
      margin: 0px 25px 0px 25px;
    }
  </style>
</head>
<body>
  <div id="scroller">
    <div class="infobox">
      <div class="infobox-content">
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>        
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>        
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>        
      </div>
    </div>
  </div>
</body>
</html>

导致： Example of what's going wrong.

如果我遗漏height我的DIV根本没有高度，所以根本没有白色背景。显然，我不能只为高度设置一个特定的像素数。我试过调整边距，填充等等都无济于事。显然我忽略了一些非常简单的事情，因为我已经在其他地方看到了这一点。浏览其他网站的CSS，我看不出我做错了什么。

请注意，在这个示例中，我只在主要的“信息框”div中有一个简单的内容div，但在完整的网站中还有其他东西，图像库，按钮等，这些也将在'信息框'内的

Answer 1

将以下属性添加到.infobox：

min-height: 100%;

或者您可以完全删除高度属性。但height: 100%不起作用（至少在小提琴中），因为它设置相对于body / html的高度

然后将position: absolute中的.infobox-content更改为：

  position: relative;

这样，.infobox的高度将会“伸展”.infobox-content

http://jsfiddle.net/94B7H/2/

Answer 2

如果您想将.info-box的高度设置为.infobox-content的高度。将position:absolute更改为position:relative上的.infobox-content，然后从height:100%

中移除.info-box

这是你的小提琴：http://jsfiddle.net/wandarkaf/UBJAZ/

如何创建一个滚动浏览器滚动条的DIV，其中包含灵活的内容

2 个答案: