2

I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.

enter image description here

As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.

So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.

Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.

Very hard to explain, I'm doing my best, but I hope someone can help me.

Deltanic
  • 1,009
  • 4
  • 11
  • 17
  • You're asking a lot of non-specific questions here, and not all of them have clear answers. You need to narrow down your issues to a single, solvable problem if you want StackOverflow to be of any help to you. – Blazemonger Nov 15 '12 at 14:19
  • Perhaps [this question](http://stackoverflow.com/q/4325643/901048) will be of some assistance. – Blazemonger Nov 15 '12 at 14:23
  • @NullPointer That's more like centering. – Deltanic Nov 15 '12 at 14:24
  • Not really. Look at this: http://jsfiddle.net/7etUR/ - Such sort of menu am I using. But then some sort of "fullscreen". – Deltanic Nov 15 '12 at 14:27

1 Answers1

0

That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.

1 - Set the font-size to 100% on your parent container.

2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.

3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.

4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.

5 - Still in the resize event, set that new percentage to the font-size of the parent element.

You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.

Text will scale Border size will scale Border radius will scale Dimensions, padding, margins will scale

It's neato.

Aaron
  • 2,482
  • 1
  • 26
  • 56