Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Responsive elements with dynamic content - Making just one element scroll

Responsive elements with dynamic content - Making just one element scroll

Problem

I'm trying to create a fluid, scrollable element in the middle of 2 other fluid elements. The whole site is supposed to be completely responsive.

My markup is basically this:

Title

Lots of items which are changing all the time.
Footer

The only element I want to scroll is the

element.

  • I can't use position: fixed on the other elements to keep them in place because the page's background is an image and it needs to be visible through the elements. Therefore, scrolling the page while the

    etc. is fixed would create a clash.

  • I can't use position: absolute on any of the elements because they all have dynamic content.

  • I can't just give

    some margin-top which equals the height of the because it could change.

  • Because of the dynamic content in the

    element, I can't give
    a height, even a fluid % based one, because I don't know how much space there will be available.

I'm kind of out of ideas now... Any help much appreciated.

Problem courtesy of: sanjaypoyzer

Solution

Approach #1: Flexbox

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommandation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). -- from css-tricks

So using the flex box I came up with this FIDDLE

Markup:

Title

content
footer

Relevant CSS:

.content
{
    flex: 1;
    overflow: auto;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header,
.content,
footer {
  width: 100%;
}
.header {
  background: yellow;
}
.content {
  background: pink;
  flex: 1;
  overflow: auto;
}
footer {
  background: gray;
  height: 80px;
}

Title

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. 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.
footer

A few points to mention:

1) I only apply flex:1 (ie flex: 1 1 auto) to the scrollable content; the other items can have a fixed or dynamic height.

2) Support for flexbox is surprisingly good in modern browsers (see here) but you will need to add some browser specific css to get this working for some older browsers.

3) For older versions of firefox additional CSS was necessary for this to work. I have since edited them out of the answer, but you can see all that in the history of this answer.

Approach #2 CSS-tables (not cross-browser)

Because you need the header to be dynamic, I initially thought of css tables to do the job.

FIDDLE1 FIDDLE2

So the first row will contain the h1 and nav,

and the second row will take up the rest of the window.

The footer has a fixed height and has position fixed.

...The only problem with this is that I don't think there is a way to do this cross-browser. So as far as I know this approach only works on Chrome and the new opera. The problem is getting scrollbars within the table row. (See this post)

Solution courtesy of: Danield

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Responsive elements with dynamic content - Making just one element scroll

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×