How to make scrollable div

Make div scrollable

I have a div that I am displaying many things in that are related to laptop for filtering data. The div increases it’s size as the data size increases in it.

I want the div to remain at a max size of 450px then if data increases scroll will come automatically. The div size should not be increased.

Can anyone help me achieve this?

8 Answers 8

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height.

See this demo

use overflow:auto property, If overflow is clipped, a scroll-bar should be added to see the rest of the content,and mention the height

What I mean is that you can use something like:

This method works better for fluid layouts that need to adapt to the height of the screen they are being viewed on and also works for the overflow-x property.

I also thought it would be worth mentioning the differences in the values for the overflow style property as I’ve seen some people using auto and others using scroll :

hidden = The overflowing content is clipped, and the rest of the content that is outside the set height of the div will be invisible

scroll = The overflowing content is clipped, but a scroll-bar is added to see the rest of the content within the set height of the div

auto = If there is overflowing content, it is clipped and a scroll-bar should be added to see the rest of the content within the set height of the div

See also on MDN for more information and examples.

How to make a DIV scrollable instead of BODY?

I want my page’s BODY not to be scrollable but a DIV inside the BODY should be scrollable. I have this in my css file:

but it doesn’t work and the DIV doesn’t become scrollabel (it just shows two disabled scroll bars for the DIV)!

4 Answers 4

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be

Here is the whole thing well explained

Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

How to make a div full screen and scrollable?

With absolute, it scrolls but doesn’t get 100% in height:

With fixed, it gets 100% in height but doesn’t scroll

I would like to avoid adding a fixed heigth to the child element and make it overflow: scroll

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You need to add overflow:auto so that it scrolls if the content overflows the container.

So first of all, if you want to have 100% height and width, you will have to define WHAT that is. So you have to tell the html/body that the size they have, is 100% width/height.

Now you don’t want to let the page scroll down, if the text goes out of the div, because you will see white space if you do. So set overflow-y to scroll, so it will scroll inside the div, and not in the document itself.

Here is a working fiddle:

Not the answer you’re looking for? Browse other questions tagged css or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

How to make a scrollable div inside of a div with a specific height

I know that there were lot’s of questions like this one, but I read them and didn’t find an answer for my specific situation.

I have a PHP file that generates me a page with heavy amount of data. I want to make it more human friendly so I’ve created a column design, where each column has it’s header, part with content and footer. I wan’t to make the part with content scrollable, as it contains multiple divs with data inside.

What I want to achieve is

What I did yet achieve is

and

Yes, those are not original screenshots, but mockups of what I did get. It was easier to make them that way due to fact the data I want to display ain’t to be publicly shared 😉 You know, private things.

Here is my CSS and part of HTML (responsible for viewing one column):

Can you please help me find an answer for: how to properly combine CSS and HTML here to get the fixed header, fixed footer and a scrollable space with content between them?

Make content horizontally scroll inside a div

I have a division in which I wanna show images and on click open them in a lightbox. I have floated them left and displayed them inline. set overflow-x to scroll but it still puts the images below once the row space is not enough. I wanna get them to be inline and display a horizontal scroll when needed.

NOTE: I can’t change the structure of the images inside. It has to be a img inside an anchor. My lightbox requires it like that.

I know this is very basic but I just can’t get it done. Don’t know what’s wrong.

5 Answers 5

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

It may be something like this in HTML:

With this stylesheet:

You can even create an intelligent script to calculate the inner container width, like this one:

if you remove the float: left from the a and add white-space: nowrap to the outer div

this should work for any size or amount of images..

which would also vertically align images of different heights if required

test code

In order to get around this, you need to place the img s in their own div with a width wide enough to hold all of them. Then you can use your styles as is.

So, when I set the img s to 120px each and place them inside a

Adjust width as necessary.

@marcio-junior’s answer (https://stackoverflow.com/a/6497462/4038790) works perfectly, but I wanted to explain for those who don’t understand why it works:

@a7omiton Along with @psyren89’s response to your question

Think of the outer div as a movie screen and the inner div as the setting in which the characters move around. If you were viewing the setting in person, that is without a screen around it, you would be able to see all of the characters at once assuming your eyes have a large enough field of vision. That would mean the setting wouldn’t have to scroll (move left to right) in order for you to see more of it and so it would stay still.

However, you are not at the setting in person, you are viewing it from your computer screen which has a width of 500px while the setting has a width of 1000px. Thus, you will need to scroll (move left to right) the setting in order to see more of the characters inside of it.

I hope that helps anyone who was lost on the principle.