div宽度在较低分辨率下无法拉伸100％

Question

I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.

That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.

The code/website can be found at: http://cliqthis.com/temp/roadhouse/index.php

Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.

Answer 1

You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.

Answer 2

Are we talking about the black bars not extending all the way to the right?

You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.

Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).

Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?

Answer 3

设置div的最小宽度。

div.class { /* ... */ min-width: ___px !important; /* ... */ }