6 replies [Last post]
lordicarus
Offline
newbie
Last seen: 12 years 29 weeks ago
Joined: 2005-12-07
Posts: 10
Points: 0

I have been searching all over the place for an explanation of this, and how to do it if it is even possible and I can't find anything that applies specifically to what I am doing.

With a 1.0 transitional doctype, I want to make a page where there is a box that is at least 100% the height of the browser window, minus the margin on top and bottom.

The box should be as high as the content requires if the content goes longer than the display window.

Every time I try to do this, my box ends up being 100% the height of the display area, which causes a scroll bar to appear because of the fact that the margin on top and bottom adds 20px to the actual height of the body.

Is there any way to do this?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 1 week ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

100% height with top/bottom margin

Hi

I suspect you won't stop once you have it (and yes it can be done). You probably want to add bits like headers, footers, navigation columns, etc.

Do a mock up of what you want as a jpg and post that, then we can give you a better idea.

BTW, my definition of when a div becomes a header is when it appears at the top, is fixed in height, and contains no content actually directly relevent to the core subject of the page (e.g. logo, search, nav links, banners, etc).

And a footer is a fixed height div at the bottom which again has no directly relevent content (e.g copyright, nav links).

Trevor

lordicarus
Offline
newbie
Last seen: 12 years 29 weeks ago
Joined: 2005-12-07
Posts: 10
Points: 0

100% height with top/bottom margin

Well essentially I am doing a bit of a redesign of my current website at http://www.denialofreality.com/ and the basic layout is pretty much the same. The way the site is now I want a margin at the bottom as well as the top which is already there. Easy enough to do on a long page like the home page itself, however, if you go to http://www.denialofreality.com/example.html you can see it is not doing what I want. I want the box to go down to the bottom of the page minus a 10 pixel margin. The image here http://www.denialofreality.com/example.jpg is what I would like it to look like when the content doesn't fill the entire page.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 1 week ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

100% height with top/bottom margin

Hi

Easy enough to do if you know how, and I do!

I'm off to work now, but I'll post some code in my break in a few hours.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 1 week ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

100% height with top/bottom margin

Hi

How does this grab you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Denial of Reality</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="WordPress 1.5.2" /><!-- leave this for stats please -->
<meta name="keywords" content="Denial of Reality, Denial of Reality Networks, denial reality, denialofreality, denialofreality.com, digital proclivity, digitalproclivity, digitalproclivity.com, 3D cards, audio, backlit keyboards, benchmark, box office results, breakthrough stem cell, camera, cd, cd-rom, cdrw, cell phones, chipset, computer, CPU, display, dvd, dvd reviews, entertainment news, escalator accident, family guy, game, game boy, gamecube, games, graphics card, hard disk, hard drive, ipod, keyboard, lcd, medical research, medical science, memory, mobile, monitor, movie, movie posters, movie release dates, movie reviews, music, news, nintendo, nintendo ds, nintendo revolution, notebook, PC, pda, peripherals, platstation, play station, playstation, portable storage, RAM, review, revolution, scripts, see movie, sound, stem cell research, stem cell research, storage, technology, trailers, tv guide, upcoming movies, video, video card, video game, video games, video ipod, x box, xbox, xbox 360," />
<style type="text/css" media="all">
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
/*** Let's go commando ***/
  margin:0;
  padding:0;
  border:0;
  border-collapse:0;
  border-spacing:0;
}
/* \*/
html,body{height:100%}
/* Last height declaration hidden from Mac IE 5.x */
body{
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
  color:#000000;
}
body{
  background-color:#241E21;
  min-width:774px;
  text-align:center;
}
input,select{
  margin:0;
  padding:0;
}
strong,b{
  font-weight:bold;
}
p{
  font-size:90%;
  line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-table;}  /* Mark Hadley's fix for IE Mac */ 
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  position:relative;
  width:774px;
  display:table;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
  margin-bottom:-44px;
  margin-top:-20px;
}
#wrapper{
  display:table-cell;
  border-right:1px solid #78758A;
  border-left:1px solid #78758A;
  position:relative; /* do we need this? */
  background-color:#BABDC2;
}
#outer{
  position:relative; /* do we need this? */
  width:596px;
  background-color:#EAEAEA;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
#center{
  width:596px;
  float:left;
  display:table;
  padding:186px 0px 44px 0px;
}
#right{
  float:left;
  display:inline;
  width:175px; /* = Right Col Width */
  margin-right:-175px; /* = right col width + one internal border width */
  position:relative;
  padding:186px 0px 44px 0px;
}
#footer{
  z-index:1;
  position:relative;
  width:100%;
  height:0px;
}
#footer-inner{
  width:774px;
  margin-left:auto;
  margin-right:auto;
  height:0px;
}
#subfooter1{
  background-color:#424E62;
  text-align:center;
  margin:0px 1px;
  height:40px;
  overflow:hidden;
}
#header{
  z-index:1;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:0px;
}
#header-inner{
  width:774px;
  margin-left:auto;
  margin-right:auto;
  height:0px;
}
.outer_horiz_border{
  background-color:#78758A;
  height:1px;
  overflow:hidden;
  font-size:0px;
  margin:0px 1px;
}
.two-px{height:2px}
.db{background-color:#424E62}
#subheader1{
  background:url(deleteme_files/dor-ban.jpg);
  height:120px;
  margin:0px 1px;
  overflow:hidden;
}
#subheader2{
  background:#F4F5B7;
  height:22px;
  margin:0px 1px;
  overflow:hidden;
  text-align:center;
}
#topmargin{
  background-color:#241E21;
  font-size:0px;
  height:20px;
  overflow:hidden;
}
#container-right{}
#container-center{}
</style>
<!--[if IE]>
<style type="text/css">
#outer{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
  <div id="wrapper">
    <div id="outer" class="floatcontainer">
      <div id="center">
        <div id="container-center">
          <p>
            This is the<br />Main Content<br />
          </p>
        </div>
      </div>
      <div id="right">
        <div id="container-right">
          <p>
            This is the Right Sidebar<br />
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="footer-inner">
    <div class="outer_horiz_border"><!-- Just a colored div --></div>
    <div class="outer_horiz_border db"><!-- Just a colored div --></div>
    <div class="outer_horiz_border"><!-- Just a colored div --></div>
    <div id="subfooter1">
      <p>
        This is Sub-Footer #1 (with Fixed Height)
      </p>
    </div>
    <div class="outer_horiz_border outside"><!-- Just a colored div --></div>
  </div>
</div>
<div id="header">
  <div id="header-inner">
    <div id="topmargin"><!-- Just a Top margin --></div>
    <div class="outer_horiz_border outside"><!-- Just a colored div --></div>
    <div id="subheader1"><!-- Just a Header Image --></div>
    <div class="outer_horiz_border two-px"><!-- Just a colored div --></div>
    <div id="subheader2">
      <p>
        Navbar
      </p>
    </div>
    <div class="outer_horiz_border"><!-- Just a colored div --></div>
  </div>
</div>
</body>
</html>

Trevor

Edited:

I changed the doctype to transitional (why?) and took out a bit of code and re-did the way the bottom margin works. That's better Smile

lordicarus
Offline
newbie
Last seen: 12 years 29 weeks ago
Joined: 2005-12-07
Posts: 10
Points: 0

100% height with top/bottom margin

That is beautiful. Once I get the new design up and running I will have to put a thank you on the site. If you have a site and an 88x31 let me know and I'll put that on there.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 1 week ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

100% height with top/bottom margin

lordicarus wrote:
That is beautiful. Once I get the new design up and running I will have to put a thank you on the site. If you have a site and an 88x31 let me know and I'll put that on there.

Hi

No publicity for me, thanks. If you want to refer to my page generator tool, get the link from the home page at www.positioniseverything.net

Otherwise a quick line to refer people to these forums.

But, nothing is necessary. I sometimes think such thankyou's clutter up sites.

Trevor