Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a DIV scrollable instead of BODY?

Tags:

html

css

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:


body {
overflow:hidden
}

.mainSection {
overflow:scroll
}

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

like image 914
user353901 Avatar asked May 30 '10 08:05

user353901


People also ask

How do you make a div content scrollable?

Making a div vertically scrollable is easy by using CSS overflow property. There are different values in overflow property. For example: overflow:auto; and the axis hiding procedure like overflow-x:hidden; and overflow-y:auto;.

How do you make a scrollable body in HTML?

To make it scrollable, we set the overflow CSS property to scroll . Then we set the tr elements in the thead to absolute position so they stay in place. Also, we set the tr elements in thead to a white background so that the elements below will be hidden when we scroll them.

How do I fix a div when scrolling?

Method 1: Using the sticky value of the position property It can be given a value of '0px' to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.

How do I force scrollbar in CSS?

To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.


1 Answers

.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.

like image 173
nikc.org Avatar answered Oct 26 '22 10:10

nikc.org