Solved

full page layout - resize to screen

Posted on 2012-03-25
9
382 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now