div填充整个屏幕-像素数

Question

I am currently working on a new website and I want to have a div ID to fit 100% of the screen, however I want to have something as a width of 250px to the right of this div. I am trying to do width: 100% - 120px but doesn't seem to make any difference. How can I do this.

Thanks for any help you can provide.

Answer 1

If you want a div with 250px to the right, then you don't want the first div to be 100% of the screen. Set the second div width to 250px and the first div width to auto and it should fill the remaining space.

Answer 2

You can't subtract pixels from percentages, this isn't your answer, but I suggest learning the basics of css first, otherwise you will have no idea why things work the way they do.

Here is a good website with a lot of layout examples and tutorials: http://www.maxdesign.com.au/articles/css-layouts/

And http://www.w3schools.com/ for css standards.

As far as your particular situation is concerned, you are taking the wrong approach. If you want to be able to subtract width from 100% you can use javascript to accomplish this goal. with jquery you can do something like this:

$("#div").width($(window).width() - 125);

This will not work once the window resizes however. You can add resize events to resize your div when the window resizes but this is cumbersome and can seem laggy. Your best bet is to use a css implementation, your question is quite vague though, you seem to be describing a two column layout with a side panel, but I could be wrong. Just for a two column layout there are different options such as whether you want your main content to be liquid or static.

I'm assuming liquid because it is more useful.

I would like to recommend jquery layout for creating layouts. Uses javascript and it's very easy to use to make quick layouts. http://layout.jquery-dev.net/

Here is your solution: http://jsfiddle.net/Z3nfv/1/