6 Replies - 37797 Views - Last Post: 21 August 2009 - 08:25 AM

#1 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Expanding a wrapper div to fill screen height

Posted 16 August 2009 - 04:55 PM

Hi,

I made the following site for a local non-profit. I made the site using my laptop which only has a 15'' screen but yesterday when I looked at it on a regular 19" LCD it looked so bare because there was so much unused space on the screen. I'd like to find a way to have it so that the wrapper (the first div inside the body) will adjust its height based on the screen size of the user.

I've searched ways to do this on Google and on this site but have yet to come across anything useful. I find it hard to believe that there's nothing out there on this so I feel bad asking but I just can't find anything.

Here's a link to the web site: Temporary Homepage.

The relevant CSS can be found here: CSS

I've made the site using xHTML, CSS, and a little bit of javascript for the dynamic content on certain pages.

Any help would be appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Expanding a wrapper div to fill screen height

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1171
  • View blog
  • Posts: 7,219
  • Joined: 07-September 06

Re: Expanding a wrapper div to fill screen height

Posted 16 August 2009 - 11:31 PM

I am not sure this is what you are looking for, but if you do something like this:

.wrapper{
  height: 100%;
  min-height: 100%;
}


that should make the main wrapper at least the screen height (and it should expand where needed - though that does sometimes prove problematic in some browsers).

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Re: Expanding a wrapper div to fill screen height

Posted 18 August 2009 - 09:51 AM

I tried implementing this but it had no effect whatsoever. Thanks for the reply just the same.

Any other ideas?
Was This Post Helpful? 0
  • +
  • -

#4 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Expanding a wrapper div to fill screen height

Posted 18 August 2009 - 10:55 AM

You could use javascript to detect the users screen resolution and load a different CSS-file into the document that adjusts sizes to fit that screen resolution! :)
Was This Post Helpful? 0
  • +
  • -

#5 Torroes_prime  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-June 09

Re: Expanding a wrapper div to fill screen height

Posted 18 August 2009 - 02:29 PM

well, first off let me make sure I understand what it is you are asking. I loaded your page up on every monitor I have ready access to, topping off at a 24" LCD set to 2880x1800 ress.

Posted Image

If I understand what you are asking, your concern is about the empty space has shown by the red here, correct?

so what you're looking for is a way to make the page dynamic so it would fill more of the screen, like this: (please excuse the crudity of this edit)
Posted Image

yes?

Well, good news/bad news time.

Good News: changing the respective divs to fill the height/width of the browser window is pretty simple. set your divs with:

height: 100%;
min-height: 100%;



Bad news: all it will do is expand the Divs. Which means you'll end up with this:
Posted Image

You still have the Empty space, just now it'd be colored Empty space.

A couple thoughts:

Set a picture for a background so when the browser window is larger then the side design the picture will be seen.
I did it on one of my websites:
Outriders

You can fill in additional content, links to other groups, news articles, pictures, ect ect in side bars. Stuff that isn't part of the site but has some relation to it.


Beyond that.... well Wimpy made a suggestion about a java script to load different css files based on browsers.
Was This Post Helpful? 0
  • +
  • -

#6 KuroTsuto  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: Expanding a wrapper div to fill screen height

Posted 19 August 2009 - 02:49 PM

I would suggest either using javascript to retrieve the user's window height and adjust the content wrapper's height to match (very simple process with jQuery, not to mention being slightly simpler and more flexible than creating separate style sheets for different resolutions.), or simply setting the following css properties on your content wrapper:
<style>
#wrapper {
	position:absolute; //fixed works as well
	top:0px;
	bottom:0px;
}
</style>

This should imply that the top of the wrapper element should be 0px from the top of the window, and the bottom 0px from the bottom. I can verify that this works in recent builds of FF 3+ and IE 7+, but I can't recall how well it works in other browsers and builds... I believe that it should function without too much hassle.

Cheerios,
~KuroTsuto

EDIT::
Note that to maximize browser-compatibility for Torroes_prime's 100% height technique, you'll need to add
height: 100%;
to the body's style definition. Additionally, it will only function if the element's parent element has a height definition of some sort (whether it be a percentage, em/px/point definition, or even inherit), thus the need to define the body element's height.

This post has been edited by KuroTsuto: 19 August 2009 - 03:05 PM

Was This Post Helpful? 0
  • +
  • -

#7 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Re: Expanding a wrapper div to fill screen height

Posted 21 August 2009 - 08:25 AM

I found out why using height:100%; min-height:100%; wasn't producing the desired effect.
I had been using
body {
	background-color: #EBEDED;
	height:100%;
	min-height:100%;
	margin: 0px;
	padding: 0px;
}


but the problem was resolved when I added html... I don't know why this changes anything but it works. If someone can explain what this does I'd appreciate it.

html, body {
	background-color: #EBEDED;
	height:100%;
	min-height:100%;
	margin: 0px;
	padding: 0px;
} 


Thanks to everyone who helped me!

Omelas
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1