Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

make div scroll when contents too big

Tags:

html

css

scroll

enter image description here

I have this setup where the results are wrapped in span tags and are 'moved' using jquery into other divs. at the moment the search just returns 30 values max and it's all good but I don't feel that is a fair limitation. what I want to be able to do is scroll the div when there are more results than can be displayed, like a list box. I've tried a number of different methods but none of them seem to work very well. I'd like it to keep a fixed height too

like image 299
Kelly Larsen Avatar asked Nov 08 '12 03:11

Kelly Larsen


2 Answers

You haven't shared any markup here but if you are willing to have a fixed height just use this

.container {
   /* Optional - You can set a  min-height : whatever px; for reserving some space*/
   height: 200px; /* Fix a height here */
   overflow: auto; /* Optionally you can also use overflow: scroll; */
}
like image 76
Mr. Alien Avatar answered Oct 11 '22 05:10

Mr. Alien


In addition to @mr-alien answer: you can use max-height to limit the size of a container and in the same time to make it fit the content:

.container {
   /* Optional - You can set a  min-height : whatever px; for reserving some space*/
   max-height: 200px; /* Fix a max-height here */
   overflow: auto; /* Optionally you can also use overflow: scroll; */
}
like image 43
Pavel Griza Avatar answered Oct 11 '22 06:10

Pavel Griza