Solved

full page layout - resize to screen

Posted on 2012-03-25
9
381 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

758 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

25 Experts available now in Live!

Get 1:1 Help Now