How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

StackOverflow https://stackoverflow.com/questions/13449168

Question

I am creating a site with clickable content that pops up a fixed width DIV with more info. This info can be quite long and it needs to scroll vertically over a static background. (similar to Pintrest for example). I've got the basic scrolling action working but I'm having trouble working out how to set the height of my content DIV so that it wraps all of the content correctly. As it stands the content just flows off the bottom of the DIV.

I've reduced this to a simple example here.

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

Which results in: Example of what

If I leave out the height my DIV has no height at all so no white background shows at all. Obviously I can't just set a specific number of pixels for the height. I've tried adjusting margins, padding, and etc, all to no avail. Obviously I am overlooking something very simple, as I've seen this done elsewhere. Looking through other websites' CSS I can't see what I am doing wrong.

Note in this example I only have a simple content div within the main 'infobox' div but in the full site there are other things, an image gallery, buttons etc, that will also go within the 'infobox'.

Was it helpful?

Solution

Add the following property to .infobox:

min-height: 100%;

Or you can just remove the height properties entirely. But height: 100% will not work (at least in the fiddle) because it sets the height relative to body/html

And then change the position: absolute in .infobox-content to:

  position: relative;

This way, the height of .infobox will "stretch" with .infobox-content

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

OTHER TIPS

If you want to set the height of .info-box as the same of .infobox-content. Change the position:absolute to position:relativeon .infobox-content and remove the height:100% from .info-box

here's a fiddle for you: http://jsfiddle.net/wandarkaf/UBJAZ/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top