?
Solved

full page layout - resize to screen

Posted on 2012-03-25
9
Medium Priority
?
389 Views
Last Modified: 2012-03-26
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
Comment
Question by:webdott
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37763270
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
 

Author Comment

by:webdott
ID: 37763304
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37763422
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37763440
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
 
LVL 16

Expert Comment

by:s8web
ID: 37763708
You were good up until #footerwrap.

Add:

position:absolute;
bottom: 0;

Open in new window


to footerwrap.
0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37763730
(of course, you need to style the footer accordingly)
0
 

Author Comment

by:webdott
ID: 37763742
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
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 2000 total points
ID: 37763781
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
 

Author Closing Comment

by:webdott
ID: 37769773
thanks
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question