• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 401
  • Last Modified:

full page layout - resize to screen

i have the following code:

CSS
html,body{margin:0;padding:0;height:100%;background: #7e7e7e;}
#bodywrap{height:100%;}
/*--header--*/
#headerwrap{background: #fff;height:125px;padding:0 1%;}
#header{margin:0 auto;min-width:800px;max-width:1200px;}
/*--page--*/
#page{margin:0 auto;min-width:800px;max-width:1200px;padding:1%;background: #ca5555;}
/*--footer--*/
#footerwrap{background: #CCFFCC;padding:1%;}
#footer{margin:0 auto;min-width:800px;max-width:1200px;}

Open in new window


Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="css.css"/>

</head>

<body><div id="bodywrap">

<div id="headerwrap"><div id="header">This is the header</div></div>
<div id="page">This is the page</div> 

<div id="footerwrap"><div id="footer">This is the footer</div></div>


</div></body>

</html>

Open in new window


What I am wanting is for the center of the page to create a full page look, even if it only has a few words in it.

I have attached 2 images to show what the above code does and what I am looking for.

Current Code:
current
What I am looking for:
want
I have tried changing the #page to:
#page{margin:0 auto;min-width:800px;max-width:1200px;padding:1%;background: #ca5555;min-height:100%;}

#page{margin:0 auto;min-width:800px;max-width:1200px;padding:1%;background: #ca5555;height:100%;}

that makes the page go further than actual height, which creates a scroll down with a whole lot of empty space in the middle.

Thanks for any help.
0
webdott
Asked:
webdott
  • 3
  • 3
  • 2
  • +1
1 Solution
 
Lalit ChandraCommented:
try add this css into your page css

min-height:100px;

this will make your div to this height.Later on you can change to your accordingly.
0
 
webdottAuthor Commented:
thanks. 100px only makes it 100 pixels high.  I need it to be the full height of the page, like 100%

tried the 100% and it did not work.
0
 
Lalit ChandraCommented:
height in % do not work.so you have to use the min-height only.
you can calculate this using jquery like

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
designatedinitializerCommented:
You need to style that main #page element so that it is absolutely positioned.
Like this:

#page{
	position:absolute;
	top:125px; /* this must be = to the header height */
	left:0px;
	right:0px;
	bottom:50px; /* this must be = to the footer height */
}

Open in new window


Notice the comments.
0
 
s8webCommented:
You were good up until #footerwrap.

Add:

position:absolute;
bottom: 0;

Open in new window


to footerwrap.
0
 
designatedinitializerCommented:
(of course, you need to style the footer accordingly)
0
 
webdottAuthor Commented:
i see that is has to do something with position, but it still is not working properly.

i am trying to understand why you can use width:100% and it works, but height does not?

thanks so far, they are close to what i need
0
 
designatedinitializerCommented:
well, that's always been a huge trouble for webdesigners...
Here's a more complete answer:
#page{
	position:absolute;
	top:125px; /* this must be = to the header height */
	left:0px;
	right:0px;
        min-height:100px; /* make sure this element doesn't disappear when the window is very short... */
	bottom:50px; /* this must be = to the footer height */
}
#footerwrap{
	position:absolute;
	bottom:0px;
	width:100%;
	height:50px;
}

Open in new window

0
 
webdottAuthor Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now