Jump to content


Photo
- - - - -
Resolved

Scale Page to fit Window Height

window height scale

  • Please log in to reply
5 replies to this topic

#1 thomaswilson90

thomaswilson90

    Newbie

  • Members
  • 3 posts

Posted 24 September 2012 - 02:07 PM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 September 2012 - 03:10 PM

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.

#3 thomaswilson90

thomaswilson90

    Newbie

  • Members
  • 3 posts

Posted 25 September 2012 - 02:22 PM

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?

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 25 September 2012 - 02:51 PM

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

Please Login or Register to see this Hidden Content



#5 thomaswilson90

thomaswilson90

    Newbie

  • Members
  • 3 posts

Posted 30 September 2012 - 01:49 PM

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.

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 September 2012 - 03:06 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, window height scale