Full Height Issue

**SunnaH** · Sep 12, 2007 11:37

Before I get slammed-- I would like to say I did read Paul's solution but I cannot make it work on my layout. So please help me achieve cross browser full heights. Thanks.

http://www.stc.org/_private/55/

**Paul O'B** · Sep 12, 2007 12:07

Hi,

You only have one shot at 100% height and the first wrapper on the page is the only element you can use and the one that must contain all the styling and appearance you need. You cannot nest inner elements and expect them to reach the bottom because it just doesn't work like that.

Use the first wrapper as the 100% high wrapper and then fit everything in from there.

Here is a quick change of your code so you can compare:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>55 Annual Technical Communication Summit</title>
<meta name="Author" content="S. Syed" />
<meta name="Keywords" content="Society For Technical Communication, Annual, Conference, Summit, 55th, Philadelphia, PA, Pennsylvania Convention Center, Philadelphia, Pennsylvania, June 1-4, 2008, Sessions, Tracks, Meeting, Lectures, Networking, Lodging, Travel" />
<meta name="Description" content="Technical Communication Summit" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<style type="text/css">

html,body {height:100%}

body {
    padding: 0;
    margin:0;
    font: 75% Verdana, Arial, Helvetica, sans-serif; 
    color: #010E22;
    background: #0779bf; 
    background-image: url(http://www.stc.org///55thConf/img/pattern.jpg);
    background-repeat:repeat-x;
    background-attachment:fixed;
}
* html .container {
    margin-left: -700px;
    position: relative;
}
.container{padding-bottom:157px}/* protect footer*/
/*\*/
* html .container, * html .content {
    height: 1px;
}
/**/

img {
    border: 0;
}
a:link { 
    text-decoration: underline; 
    color: #000;
}
a:visited { 
    text-decoration: underline; 
    color: #000;
}
a:hover, a:active { 
    text-decoration: none; 
    color: #fff;
    background-color: #000;
}

.content {
    padding: 5px;
}
.width {
    width: 90%;
    min-width: 700px;
    margin:0 auto;
    min-height:100%;
    background-color:#fff;
    border-left :1px solid #000;
    border-right :1px solid #000;
}

* html .width {
    height:100%;
}
* html .minwidth {
    padding-left: 700px;
}
/*\*/
* html .minwidth, * html .layout {
    height: 1px;
}
/**/
/*p {padding:1.5em; margin:0;}*/

.content a:link { 
    text-decoration: underline; 
    color: #1e90ff;
}
.content a:visited { 
    text-decoration: underline; 
    color: #0066cc;
}
.content a:hover, a:active { 
    text-decoration: none; 
    color: #ffffff;
    background-color: #1e90ff;
}

.content h2 {font-size:1.4em; text-align:center; font-weight:normal;}


#header {
    height:120px;
    border-left :1px solid #000;
    border-right :1px solid #000;
    background:#fff;
    background-image:url(http://www.stc.org///55thConf/img/pattern02.jpg);
    background-repeat: repeat-x;
    text-align:center;
    margin: 0;
    padding: 0;
    border-bottom: 5px solid #6699cc;
}
#header img {
    margin: 0 auto;
    margin-left: auto;
    margin-right:auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

#footer {
    height:50px;
    text-align:center;
    /*margin: -5px;*/
    border-top: 5px solid #6699cc;
    border-left :1px solid #000;
    border-right :1px solid #000;
    border-bottom :1px solid #000;
    background: #0779bf;
    font-size: 80%;
    padding-top: .5em;
    width: 90%;
    min-width: 700px;
    margin:-157px auto 0;

}

#outterFooter {
    height:85px;
    text-align:center;
    color: #ccc;
    font-size: 80%;
    padding: .5em 0;
    line-height: 1.5em;
    background: #0779bf;
    width: 90%;
    min-width: 700px;
    margin:auto;
    border:1px solid #0779bf
}

</style>
</head>
<body>
<div class="width">
    <div class="minwidth">
        <div class="layout">
            <div class="container">
                <div id="header"><img src="http://www.stc.org///55thConf/img/header01.jpg" alt="Technical Communication Summitt" width="419" height="100" title="Technical Communication Summitt" /></div>
                <div class="content">
                    <p><a href="">lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit. Proin erat enim, mollis eu, dignissim quis, varius vel, leo. Fusce mattis, odio ac mollis malesuada, nulla mi volutpat dui, non mollis lorem libero et neque. Fusce nisl arcu, suscipit at, rutrum at, consequat vel, odio. Integer ultricies eros eget magna. Sed sed leo. Nam a mauris. Praesent sed nisi elementum purus cursus porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc mi. Vivamus eros nibh, lobortis in, imperdiet et, fringilla volutpat, nisi. Mauris metus <a href="">felis, malesuada tristique,</a> accumsan sit amet, egestas eget, nibh. Pellentesque vel enim eget ante luctus ullamcorper. Nullam sit amet leo. Nulla facilisi. Sed felis pede, nonummy sit amet, dapibus sed, vehicula porttitor, leo. Cras vitae erat. Curabitur dolor ligula, ultrices non, commodo at, vulputate non, magna.</p>
                    <p>Duis tempus, sem in lacinia interdum, pede nisl fringilla est, a molestie massa tellus eget dolor. Vivamus viverra justo ac tellus. Nullam vulputate elit at diam. Etiam in nulla id ipsum sodales mattis. In vel velit sit amet ante nonummy gravida. Praesent hendrerit, est quis imperdiet luctus, lectus nunc tempor tellus, eget pretium dui enim non turpis. Sed in nisl at lectus cursus porta. Donec sed sapien id erat lacinia volutpat. Donec luctus feugiat lorem. Vestibulum non lacus. Pellentesque condimentum ipsum sit amet felis. Cras non purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse purus.</p>
                    <p>Nunc non augue eu ipsum semper hendrerit. In facilisis porttitor turpis. Curabitur sollicitudin justo id odio. Aenean pharetra ultricies ligula. Etiam pretium turpis egestas pede. Nullam augue. Ut varius magna ac purus. Nunc at dolor. Phasellus lacus turpis, volutpat et, pellentesque ut, mattis ut, nibh. Nunc mi. Etiam auctor, dui non semper malesuada, ligula arcu dapibus velit, at consequat justo nisl et sapien.</p>
                </div>
                <!-- end content -->
            </div>
            <!-- end container -->
        </div>
        <!-- end layout -->
    </div>
    <!-- end minwidth -->
</div>
<div id="footer">
    <p><a href="">Home</a> | <a href="">Leadership Day</a> | <a gref="">Hotel</a> | <a href="">Registration</a> | <a href="">Sessions Search</a></p>
</div>
<!-- end footer -->
<div id="outterFooter">
    <p>Society for Technical Communication<br />
        901 North Stuart Street | Suite 904 | Arlington, Virginia 22203<br />
        Phone: +1 (703) 522-4114 | Fax: +1 (703) 522-2075<br />
        <a href='&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#115;&#116;&#99;&#64;&#115;&#116;&#99;&#46;&#111;&#114;&#103;'>Email: STC</a> | 
        &copy; 2007<br  />
        Society Office Open 9am-5pm (US Eastern Time, GMT-5)</p>
</div>
<!-- end outterFooter -->
<!-- end width -->
</body>
</html>

The faq on 100% height (and the footer faq) explain this in detail so re-study it until you are sure you know how it works

**all4nerds** · Sep 12, 2007 12:14

Hello

You also have four div's that don't do anything ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>55 Annual Technical Communication Summit</title>
<meta name="Author" content="S. Syed" />
<meta name="Keywords" content="Society For Technical Communication, Annual, Conference, Summit, 55th, Philadelphia, PA, Pennsylvania Convention Center, Philadelphia, Pennsylvania, June 1-4, 2008, Sessions, Tracks, Meeting, Lectures, Networking, Lodging, Travel" />
<meta name="Description" content="Technical Communication Summit" />
<link rel="shortcut icon" href="http://www.stc.org/_private/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://www.stc.org/_private/favicon.ico" type="image/ico" />

<style type="text/css">
*{padding:0;margin:0;}

html,body{height:100&#37;;}

body{
font:75% Verdana, Arial, Helvetica, sans-serif; 
color:#010E22;
background:#0779bf url(../../55thConf/img/pattern.jpg) repeat-x fixed;
}

img{border: 0}

.width,#footer,#outterFooter{width:90%;margin:0 auto;min-width:700px;}

.width{
border-left :1px solid #000;
border-right :1px solid #000;
background:#ffffff;
margin-top:-140px;
}

* html .width {height:100%;}
head+body .width {min-height:100%;}

a:link {text-decoration: underline; color: #1e90ff;}
a:visited {color:#0066cc;}
a:hover, a:active {text-decoration: none;color:#000000;}

.width p{padding:5px;}

.content h2 {font-size:1.4em; text-align:center; font-weight:normal;}

#header{
height:120px;
background:#fff url(../../55thConf/img/pattern02.jpg) repeat-x;
text-align:center;
border-bottom: 5px solid #6699cc;
border-top:140px solid #6699cc;
}

#header img {margin: 5px auto;}

#footer{
height:50px;
text-align:center;
border:1px solid #000;
border-top:5px solid #6699cc;
background:#0779bf;
font-size: 80%;
padding-top:.5em;
}

#outterFooter{
text-align:center;
color: #ccc;
font-size: 80%;
padding: .5em;
}

</style>
</head>

<body>

<div class="width">

<div id="header"><img src="../../55thConf/img/header01.jpg" alt="Technical Communication Summitt" width="419" height="100" title="Technical Communication Summitt" /></div>

<p><a href="##">lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit. Proin erat enim, mollis eu, dignissim quis, varius vel, leo. Fusce mattis, odio ac mollis malesuada, nulla mi volutpat dui, non mollis lorem libero et neque. Fusce nisl arcu, suscipit at, rutrum at, consequat vel, odio. Integer ultricies eros eget magna. Sed sed leo. Nam a mauris. Praesent sed nisi elementum purus cursus porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc mi. Vivamus eros nibh, lobortis in, imperdiet et, fringilla volutpat, nisi. Mauris metus <a href="##">felis, malesuada tristique,</a> accumsan sit amet, egestas eget, nibh. Pellentesque vel enim eget ante luctus ullamcorper. Nullam sit amet leo. Nulla facilisi. Sed felis pede, nonummy sit amet, dapibus sed, vehicula porttitor, leo. Cras vitae erat. Curabitur dolor ligula, ultrices non, commodo at, vulputate non, magna.</p>

<p>Duis tempus, sem in lacinia interdum, pede nisl fringilla est, a molestie massa tellus eget dolor. Vivamus viverra justo ac tellus. Nullam vulputate elit at diam. Etiam in nulla id ipsum sodales mattis. In vel velit sit amet ante nonummy gravida. Praesent hendrerit, est quis imperdiet luctus, lectus nunc tempor tellus, eget pretium dui enim non turpis. Sed in nisl at lectus cursus porta. Donec sed sapien id erat lacinia volutpat. Donec luctus feugiat lorem. Vestibulum non lacus. Pellentesque condimentum ipsum sit amet felis. Cras non purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse purus.</p>

<p>Nunc non augue eu ipsum semper hendrerit. In facilisis porttitor turpis. Curabitur sollicitudin justo id odio. Aenean pharetra ultricies ligula. Etiam pretium turpis egestas pede. Nullam augue. Ut varius magna ac purus. Nunc at dolor. Phasellus lacus turpis, volutpat et, pellentesque ut, mattis ut, nibh. Nunc mi. Etiam auctor, dui non semper malesuada, ligula arcu dapibus velit, at consequat justo nisl et sapien.</p>

</div> <!-- end content -->

<div id="footer"><p><a href="##">Home</a> | <a href="##">Leadership Day</a> | <a href="##">Hotel</a> | <a href="##">Registration</a> | <a href="##">Sessions Search</a></p>
</div> <!-- end footer -->

<div id="outterFooter"><p>Society for Technical Communication<br /> 
901 North Stuart Street | Suite 904 | Arlington, Virginia 22203<br />
Phone: +1 (703) 522-4114 | Fax: +1 (703) 522-2075<br />
<a href='mailto:stc@stc.org'>Email: STC</a> | 
&copy; 2007<br  />
Society Office Open 9am-5pm (US Eastern Time, GMT-5)</p>
</div> <!-- end outterFooter -->



<!--// Start Google Analitics //-->
<script src="../../../www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-546107-1";
urchinTracker();
</script>
<!--// Stop Google Analitics //-->
</body>
</html>

**SunnaH** · Sep 12, 2007 12:45

Thanks guys for allowing me to take a second look. It was combination of things. The main one being that I have extra divs that were throwing me off. Thank you very much.

**rguy84** · Sep 12, 2007 13:15

Originally Posted by all4nerds

Hello
You also have four div's that don't do anything ?

My guess is so it works down to IE5?

User Tag List

Thread: Full Height Issue

Thread Tools

Display

Full Height Issue

Bookmarks

Bookmarks

Posting Permissions