I would like to create a fixed div that holds scrollable content inside, but I am having trouble making the div look the same on different desktop screens. I figured if I made the div 100% width and height it would make the div adjust with screen size, but I am guessing I am missing something because it doesn’t change the size of the div at all for some reason. Any help would be much appreciated! I have attached the link to my project below. :~)
Thanks for reaching out and great question about fixed scrollable divs.
Percentages are values relative to the parent of an element. To make your div or section size relative to the viewport of your device, you’d want to use viewport units: vw for width and vh for height.
Also, note that adding any min-width or min-height value will not help when you want to have a fixed size for your div. “Min” means that the div will not shrink below those values but it will grow as you add content. And if you want this div to be scrollable (that is you want the content in the div to be scrolled and not the entire site), then you don’t want the div to grow as you add more content.
So, based on these pieces of info, let’s fix your div:
- Make sure the section covers the whole page: Width: 100% + Height: 100vh
(note that you can use 100vw for the width, however this may cause an issue on some browsers which add a scrollbar within the viewport.)
- Now since the section has a fixed size, you can use percentages to make the div fill the section. However, make sure to add 100% to the width and height fields and not the “min” fields.
- Also you may want to change the overflow to auto so scrollbars only appear when needed.
- Now try to add more content in your div. Since you have flexbox applied, it’s best to switch the layout to vertical and justify it to the start of the div.
I made a video showing you how to do this: https://cl.ly/af0a7a5a487a
Note that you may need to change the height on smaller devices to a value lower than 100vh as some devices include the address bar and other toolbars within the viewport so the actual visible part of the device might be less than 100vh.
Hope this is helpful. If you have any other questions, please don’t hesitate to reach out again, and we’ll be happy to help!
All the best,
Thank you so much for your help!! I was able to repeat what you did in the video with ease! :~) I have one last question. In order to make sectioned blocks of content on each page, do I just make divs inside the scrollable div we created? In order for those to scale should I use the same height + width settings? Thanks so much Anna!
You’re most welcome @minima. Glad you were able to recreate the section.
If I understand you correctly, you want to have multiple scrollable divs on each page, is that correct?
If yes, then you can do that in many ways. The quickest way with your current setup would be to duplicate the
section (not the div) as many time as you need it. Just make sure to remove the navbar outside of the section first.
Hope this is helpful.
I think I explained it a bit weird. I actually want to created blocked content inside of the scrollable div. So there would be a hero, content, and a footer inside the scrollable div. Let me know if I explained it right! All of the content on the page would be contained inside of that scrollable div.
If all of the content of the page is within the scrollable div block, it will look something like this:
Is that what you want? If yes, then, yes you’ll have to add all content inside the scrollable div block.
However, if you want the header and the footer to stay fixed and only the middle to be scrolled like this:
Then you’ll have to add the header and the footer in the section instead.
I’m not sure if you can see the change I just made. But I mean sorta like what I’ve changed on the site. There is a div inside of the scrollable one that allows for another section of content. I want to make the block fill the scrollable area we created. Thats the last component I need to figure out how to structure the rest of my pages. Let me know if that made it clearer. Sorry for all the confusion.
I believe thats what you did in the first option?
Hi again @minima
I see that you were able to add the footer in your scrollable div. Are you still having issues with this layout? Or were you able to resolve the issue?
Yeah I made another div at the bottom of the scrollable div, but I was trying to figure out how to make it fill the space vertically. so that the green background with content fills the screen when you scroll all the way up. I wasn’t sure if it would make more sense to use a section element or a div block to achieve this.
Hi again @minima
Both a div an d a section work the same way. In this case, you won’t be able to nest a section inside another section, so you’ll be using a div block.
That said, set the height of both content sections (the “hero” and the “content block”) to 100%. Then, make sure to set the flex child setting to don’t shrink.
Hope this is helpful.
You have no idea how helpful you’ve been!! Thank you so much!! That was everything I had a question about. :~)
You’re most welcome. Glad to help ️
Have a wonderful day and enjoy designing your project!