content outside of the html tag

Question

i have a webpage, scrollbar is not needed but still i get a scroll bar. and i get a section which is outside of the html tags. there is a brown part color of the body which appear outside of the html i use firebug and when i put my mouse over the html tag it highlight the entire page except the brown part at the bottom

the page url is link

here is a picture the page bottom should be the black part.

Answer 1

The trouble here is your <div id="filter_list" class="dd_list">. Although you've set overflow: hidden; you haven't given a height for the box, so it gleefully scrolls down the page, including well past the bottom of your regular content.

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

A note on debugging: since there are clearly no offending elements at the bottom of the page, I tried just deleting elements from the page one by one until the scrollbar disappeared. Once I found the offending parent element, I refreshed the page and started deleting that element's children. And I repeated that until I got to the #filter_list element, which at last offered a tangible explanation for the behavior.

Answer 2

If you want the black bar to be pinned to the bottom you could set its position to fixed.

The body background color will extend to the entire client area of the browser regardless of how big the body actually is.

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

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

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