5 replies to this topic

[thomaswilson90]

Hi,

I'm customizing my pagelines template and I want to scale a page to fit into the window height on the browser window it is currently being displayed in. I want to get rid of the scrollbar.

Page I want to scale: www.bored-studios.com

What I want it to do:

Currently the page has 10px padding at the top and a 10px margin below the footer (I want to keep this). But on my work laptop, 15inch screen, the scroll bar appears as the page is slightly too long to view without it. Yet on my home laptop, 18inch, it is too short to fill the whole height of the window.

1. So when it is too long and a scrollbar is displayed I actually want the page to resize so that it fits the window height but no more, 100% window height not 110% window height.

2. When it is too short I want the page to center in the window. I have tried this but with no luck.

I've tried everything I can think of but I cannot solve point 1 or 2. I hope I've explained what I want to do so that you understand where I'm coming from. It's like the responsive layout for width but for height instead.

Any help is appreciated,
Tom

[catrina]

The page can't be resized to fit the browser window according to what computer/device the visitor is using. Since so many people are using browsers in different window sizes on devices with different screen sizes, there isn't much selective control you have over whether the scrollbar shows up or not. The visitor would need to zoom out in the browser window for the page to fit if it is too big or zoom in if the page is too small. I think the best solution would be to pick two or three similar screen heights and work around those sizes.

[thomaswilson90]

Yea I was thinking about working with a 15inch screen height and then centering if the screen was any bigger. Is there a way to center the page on the screen then? I've tried changing the css to vertical-align the page but with no luck. Any thoughts on how to center the entire page in respect to the window size?

[catrina]

You may want to look into other methods of vertical alignment:

Please Login or Register to see this Hidden Content

[thomaswilson90]

I'm going to keep it like it is for now.

For anyone interested:
100% of browser windows are 600px or more. So if you wanted to set the height of the page to 600px and then use one of the above alignment options (follow link) then it would mean the page contents would not have to be scrolled on any computer browsers.

[Rob]

The topic was marked as resolved.