How do I make a single child div scroll?

Question

I am trying to create a page layout where most of the page is static and only the contents of a single div scroll. For simplicity, I am starting with two divs "header" and "content", but I don't want to use position:fixed on the header because I want to be able to expand this to have any number of other elements on the page. How do I achieve this?

Below is the code that I have so far (I am using React). Right now, none of it scrolls at all.

Thanks!

The react element:

var Scrolly = React.createClass({ render: function(){ var lorem = "Lorem ipsum dolor sit amet... "; var sampleText = lorem + lorem + lorem + lorem; var sampleHeader = "this is a header!" return( <div className={"scrolly"}> <div className={"header"}> {sampleHeader} </div> <div className={"content"}> {sampleText} </div> </div> ); } });

The less file:

.scrolly{ .content{ overflow: auto; max-height: 100%; } }

rgthree · Accepted Answer · 2014-12-10 15:19:48Z

1

For maximum browser support you're going to need to use a rigid combination of absolute/fixed positions and heights. With each new element, that means adjusting it so.

However, flexbox is here, and you can achieve a flowing layout very simply now in modern browsers. You can use this for modern browsers and gracefully fall back to different layout for those which do not support (namly, IE10 and below).

See this fiddle: http://jsfiddle.net/rgthree/92otu6z0/

Markup:

<div class="container"> <div class="header"> {sampleHeader} </div> <div class="content"> {sampleText} </div> </div>

CSS:

html, body {height:100%; margin:0px; padding:0px;} .container { display:flex; flex-direction: column; height: 100%; } .container .header { height:50px; background:#CCC; flex-grow:0; } .container .content { overflow: scroll; overflow-x: hidden; background:#FAFAFA; flex-grow:1; }

answered Dec 10, 2014 at 15:19

rgthree

7,28319 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kat Over a year ago

Thanks for the answer! Could you clarify what advantage flex would be giving me here? Is it so that regardless of the window size, the div still takes up the rest of the page?

rgthree Over a year ago

Yup. It works as you would expect. Each item can flow to take up all available space. Further, if you add a new item (say, sub-header) you don't need to touch .content's styles at all. It all just works. You want to use flexbox in your situation (your question basically reads "how can i use flexbox" haha). It just comes down to browser support at this point.

rgthree Over a year ago

Note that I also provided the MDN link for flexbox in my answer, so you can evaluate it yourself: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

kat Over a year ago

Thanks! This will come in handy

rgthree Over a year ago

Yup, I provided a detailed link in the answer (caniuse.com/#search=flex). Looks like iOS 7.1+, Android 4.4+, IE Mobile 11, Opera Mobile 12.1, Chrome for Android 39 and Firefox for Android 33 and Blackberry Browser 10. Safari (iOS and OSX) and Blackberry you will need to add "-webkit-" prefixed properties. There is an older version of flexbox that browsers started implementing before the spec was finalized (the lighter green boxes in the provided link). You could learn that syntax if you wanted further reach but, in my opinion, I'd gracefully degrade to a static layout.

|

Alberto Rico · Accepted Answer · 2014-12-10 15:09:34Z

0

You may want to use "overflow: scroll" instead:

.scrolly{ .content{ overflow: auto; max-height: 100%; } }

And ensure the content is actually larger than the .content div where it's contained!

For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

answered Dec 10, 2014 at 15:09

Alberto Rico

4051 gold badge5 silver badges21 bronze badges

5 Comments

kat Over a year ago

Thanks for your quick response! I tried overflow:scroll, and it didn't change anything (also my understanding of these properties is that it just has to do with whether or not the scroll bar is visible). I was hoping that max-height would ensure that the div ends at the bottom of the screen, and I can see visually that the content overflows the bottom of the screen. Is this not sufficient to ensure that the content is larger than its container div?

kat Over a year ago

Update: I tried setting max-height: 100px instead of max-height:100% and it worked! Thanks for the tip on the content height. Any idea why the 100% didn't limit the div size appropriately?

Alberto Rico Over a year ago

No problem :). The max-height of 100% referred to the container where the div is, so if the container was as big as your viewport (your screen), you'd only notice the browser scroll when the content had grown!

rgthree Over a year ago

I don't see how this helps. max-height:100% does not stop the .content from going off the page without compensation for .header's height. Further, .scrolly would need a height set for this to work. Also, @kat, if you were to give it a max-height:100px and resize your browser to be less than that height-wise, your .content would still go off the screen.

kat Over a year ago

@rgthree I know max-height:100px doesn't work, it was just an experiment to see if my code was working if I limited the height of the div. You're right that I need to dynamically resize it based on the viewport size. I was planning to do this using javascript and inline styles, but I will look into flexbox now because of your answer. Thanks!

Collectives™ on Stack Overflow

How do I make a single child div scroll?

2 Answers 2

7 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Related