Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

100% height div with top and bottom margins

Status
Not open for further replies.
derwent

derwent

Programmer
May 5, 2004
428
GB
I need to use a div tag with 100% height so that it fills the users screen, but with a header and footer. Adding margin-top to the css moves the whole div down past the bottom of the page.

The center column should scroll with it's own scroll bar.

Here is where I have got to at the moment

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>
<title>Three columns full height</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>

<style type="text/css">
<!--
html {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:#003366; font-size:80%; font-family: verdana, sans-serif; color: #ffffff;}

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

#header {top:10px; display:block; right: 18px; width: 100%; left: 1px; height:62px; z-index:2; background: #ffffff}

#search {position: relative; top: 2px; height: 28px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699; color: #ffffff; text-align: right;}

#contentleft {position: relative; width: 127px; height: 100%; left: 0px; top:4px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699;}
#contentright {position: absolute; right:0px; width: 160px; height: 100%; top:96px; border-top: 2px solid #6699CC; border-left: 2px solid #6699CC; background-color: #336699;}
#contentcenter {position: absolute; left:130px; right: 165px; height: 100%; top:96px; background-color: #003366; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; overflow: auto}

#footer {position: absolute; display: block; width:100%; height:41px; bottom: -2px; background-color: #cccccc; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; color: #336696; line-height: 10px}
-->
</style>
</head>

<body>
<div id='header'></div>
<div id='search'></div>

<div id='contentleft'></div>
<div id='contentcenter'>
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br /> blah <br />
</div>
<div id='contentright'></div>

<div id='footer'></div>

</body>
</html>
 
Sort by date Sort by votes
Thanks matey

The stunicholls layouts use margins left and right to give the illusion of three columns, however I need top and left border on each of the left and right columns so can`t use that method [sad]
 
Upvote 0 Downvote

If you only want one column, you can remove the 3 you don't need - I did this on Friday from the same code with no problems.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
It has to be three columns as in the code above.

At the moment the sizxe of the site is fixed but it needs to be full screen size.
 
Upvote 0 Downvote
I need top and left border on each of the left and right columns so can`t use that method
Click to expand...

Try putting a container inside the div and give that padding or margins to achieve this.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
766
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
223
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
692
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top