Content outside the html tag

Question

I have a webpage, no scrollbar needed, but still I get a scrollbar. and I get a section that is outside of the html tags. there is a brown color of the body part that appears outside the html i use firebug and when i hover over the html tag it selects the whole page except the brown part at the bottom

URL page link

here the picture at the bottom of the page should be black.

Answer 1

The problem here is in your <div id="filter_list" class="dd_list"> . Despite the fact that you installed overflow: hidden; , you did not specify a height for this field, so it joyfully scrolls the page down, including at the bottom of your regular content.

Set height: 100px; (or no matter how big you need it), and the rest of the page layout will return to normal.

Debugging note: since there are clearly non-offensive items on the bottom of the page, I tried just deleting items from the page one by one until the scrollbar disappears. As soon as I found the offending parent of the item, I refreshed the page and started removing this kids item. And I repeated this until I hit the #filter_list element, which finally offered a tangible explanation of the behavior.

Answer 2

If you want the black bar to be fixed at the bottom, you can set its position to fixed.

The background color on the body will apply to the entire client area of ​​the browser, regardless of how large it really is.

I modified your css to put a black bar at the bottom of the page:

 #footer { height: 75px; background: url(images/bottom_menu_bg02.jpg); position: fixed; bottom: 0px; } 

You can use overflow: hidden to hide the scrollbar, but I'm not sure what you really want to do in this case is really.

Answer 3

Found a "mistake". This is #filter_list . It has a bunch of divs that contain ... a list of filters, I think.

A simple fix would be

 #filter_list{ height:400px; overflow-y:scroll; }