How to get content to go 100%

**blackman890** · Sep 6, 2007 20:03

Hello there.

I have looked at about dozens of articles and examples but none of them explain the problem I am in.

Take a look at the following site: http://dyraheimur.is/web/wordpress/?page_id=2

As you can see, the content is ugly, I need the content to go 100%. Is there anyway to implement something like that?

Sincerely:
Jonatan Nilsson

P.S.
I know my website doesn't validate and I am working on it

[EDIT]
Validates now

**Shaun(OfTheDead)** · Sep 6, 2007 20:42

What do you mean by "go 100%" ??

**CraniumDesigns** · Sep 6, 2007 21:50

yes, what do u mean? do u mean make the gradient in the content be on the bottom? if so i'd make that a seperate div and fake it. the text in the content area will then just expand vertically as needed.

**felgall** · Sep 7, 2007 03:24

To get the content to fill at least 100% of the window height you need:

html, body {height : 100%; overflow : visible;}

**all4nerds** · Sep 7, 2007 04:03

Hello

Rethink how you do your background images, only one the wrapper can be 100% high , so thats were your main repeated y background image has to go

**Paul O'B** · Sep 7, 2007 04:31

Hi,

Originally Posted by blackman890

I have looked at about dozens of articles and examples but none of them explain the problem I am in.

Then you haven't read mine or looked at the FAQ as 100% height has been done to death in these forums

If you are talking about those shadows then there are 2 ways you could do this.

You could place your footer outside of the main outer and apply your images to it. Then you simply drag the footer back into view.

Or you could absolutely place the images at the bottom of the main outer.

1st method:

Code:

<!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" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kafari &raquo; About</title>
<meta name="generator" content="WordPress 2.2.2" />
<!-- leave this for stats please -->
<style type="text/css" media="screen">
/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */

body
{
    margin: 0;
    padding:0;
    /*background: #808080;
    color: #333333;*/
    background: url(http://dyraheimur.is/web/wordpress/images/background.jpg) #2F3D45 repeat;
    height:100%;
}

h1, h2, p, div, form, ul, li, dl, dt, dd { margin: 0px; padding: 0px; }

a:link { color: #001e5e; text-decoration: none; }
a:visited { color: #001e5e; text-decoration: none; }
a:hover { color: #001e5e; text-decoration: underline; }
a:active { color: #001e5e; text-decoration: none; }
    
#main
{
    margin: 0px auto 0px auto;
    width: 800px;
    min-height:100%;
    border-left:solid 2px #000000;
    border-right:solid 2px #000000;
    background: #ffffff url(http://dyraheimur.is/web/wordpress/images/content_shadow.gif) repeat-y 200px 0;
}
* html #main{height:100%;}

#header
{
    height:196px;
    background:#ffffff;
    /*color:#000000;*/
    /*border:solid #000000;
    border-width:0px 0px 2px 0px;*/
}

#menu
{
    width: 200px;
    float: left;
    /*border: 1px solid #000000;*/
    /*background: #c0c0c0;*/
    /*color: #333333;*/
    /*height: 400px;*/
    padding-bottom:200px;
    /*background: #ffffff url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;*/
}

#content
{
    margin: 0px 0px 0px 200px;
    /*border: 1px solid #000000;*/
    /*background: #ffffff;*/
    /*color: #333333;*/
    padding: 20px 2px 100px 20px;
    position :relative;
}

#footer{
    width: 800px;
    height: 200px;
    margin:-200px auto 0;
  background:url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;

}
#footer div
{
    width: 600px;
    height: 200px;
    margin-left:200px;
    background: url(http://dyraheimur.is/web/wordpress/images/content_bottom.gif) no-repeat left bottom;
}

a img {    border: none; }

#menu ul { list-style-type:none; }
#menu ul.top { background: url(http://dyraheimur.is/web/wordpress/images/bubble_top.gif) no-repeat; padding-top:4px;}
#menu li { margin-left:5px;}
#menu li.pagenav { background: url(http://dyraheimur.is/web/wordpress/images/menu_bubble.gif) no-repeat; padding:6px 0px 0px 30px; height:30px; margin-left:0px; font: bold 14px arial; color:#ffffff;}

/*  
CSS-styles for the ANIga gallery Wordpress Plugin from Michael Naab
http://animalbeach.net
*/

.gallery_clear {
    clear:both;
}

.gallery_list {
    padding-top:25px;
}

.gallery_alignright {
    float: right;
}
.gallery_alignleft {
    float: left;
}

.gallery_aligncenter {
    text-align:center;
}

.gallery_list_p {
    padding-right:10px;
    padding-left:10px;
    width:65%;
}

.gallery_pic_border {
    border:1px solid #ddd;
}

.gallery_select {
    font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

/* this is for a constant viewing position when clicking through pictures */
.gallery_slds_td {
    height:400px;
    width:400px;
    /*this is for black stripes (just like 16 to 9 in TV) */
    background:black;
}

.gallery_slds_table {
    height:400px;
    width:400px;
    border:none;
}

.gallery_thumb_td {
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
/*    border:1px solid #ddd;*/
/*    background-color:#d5d6d7;*/
    font-size:0.9em;
    line-height:0.9em;
}

/*.gallery_slds_filter {
    filter:progid:DXImageTransform.Microsoft.Fade();
}*/

.gallery_error {
    border:1px solid #ddd;
    background:#FFFF99;
    color:#000000;
    padding:10px;
    margin:30px;
    text-align:center;
}

.gallery_meta {
    color: #777;
    padding-top: 5px;
    margin: 30px 0;
    clear: both;
    text-align: center;
}

.gallery_alt {
    margin: 0;
    padding: 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.gallery_pad {
    padding-top: 20px;
}

.gallery_line_h {
    line-height:20px;
}

.gallery_high {
    color:#777;
}




</style>
</head>
<body>
<div id="main">
    <!--<div id="rap">
<h1 id="header"><a href="http://dyraheimur.is/web/wordpress/">Kafari</a></h1>-->
    <div id="header"> <img src="http://dyraheimur.is/web/wordpress/images/banner.gif" alt="Kafari - kafari@kafari.is - 899-9909"/> </div>
    <!-- end header -->
    <!-- begin sidebar -->
    <div id="menu">
        <ul class="top">
            <li class="pagenav">Valmoguleikar</li>
            <li>
                <ul>
                    <li class="page_item current_page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" title="About">About</a></li>
                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=3" title="Prufa">Prufa</a></li>
                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=8" title="Myndagaller&#253;">Myndagaller&#253;</a>
                        <ul>
                            <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=11" title="Myndir">Myndir</a>
                                <ul>
                                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=13" title="Bryggjuvi&#240;ger&#240;ir">Bryggjuvi&#240;ger&#240;ir</a></li>
                                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=12" title="Skipavi&#240;ger&#240;ir">Skipavi&#240;ger&#240;ir</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end sidebar -->
    <div id="content">
        <div class="post" id="post-2">
            <h3 class="storytitle"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" rel="bookmark">About</a></h3>
            <div class="storycontent">
                <p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
            </div>
            <!--<div class="feedback">
                    </div>-->
        </div>
    </div>
</div>
<!-- begin footer -->
<div id="footer"><div></div></div>
</body>
</html>

2nd method :

Code:

<!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" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kafari &raquo; About</title>
<meta name="generator" content="WordPress 2.2.2" />
<!-- leave this for stats please -->
<style type="text/css" media="screen">
/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */

body
{
    margin: 0;
    padding:0;
    /*background: #808080;
    color: #333333;*/
    background: url(http://dyraheimur.is/web/wordpress/images/background.jpg) #2F3D45 repeat;
    height:100%;
}

h1, h2, p, div, form, ul, li, dl, dt, dd { margin: 0px; padding: 0px; }

a:link { color: #001e5e; text-decoration: none; }
a:visited { color: #001e5e; text-decoration: none; }
a:hover { color: #001e5e; text-decoration: underline; }
a:active { color: #001e5e; text-decoration: none; }
    
#main
{
    margin: 0px auto 0px auto;
    width: 800px;
    min-height:100%;
    border-left:solid 2px #000000;
    border-right:solid 2px #000000;
    position:relative;
    background:#fff url(http://dyraheimur.is/web/wordpress/images/content_shadow.gif) repeat-y 200px 0;
}
* html #main{height:100%;}

.base{
  background: #ffffff url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;    
position:absolute;
z-index:1;
bottom:0;
left:0;
width:200px;
height:200px;
}
.base span{
    width:600px;
    position:absolute;
    left:200px;
    height:100px;
    bottom:0;
    background: #ffffff url(http://dyraheimur.is/web/wordpress/images/content_bottom.gif) no-repeat;

}

#header
{
    height:196px;
    background:#ffffff;
    /*color:#000000;*/
    /*border:solid #000000;
    border-width:0px 0px 2px 0px;*/
position:relative;z-index:2;
}

#menu
{
    width: 200px;
    float: left;
    /*border: 1px solid #000000;*/
    /*background: #c0c0c0;*/
    /*color: #333333;*/
    /*height: 400px;*/
    padding-bottom:200px;
    /*background: #ffffff url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;*/
z-index:2;
position:relative;
}

#content
{
    margin: 0px 0px 0px 200px;
    /*border: 1px solid #000000;*/
    /*background: #ffffff;*/
    /*color: #333333;*/
    padding: 20px;
    position :relative;
    z-index:2;
}

a img {    border: none; }

#menu ul { list-style-type:none; }
#menu ul.top { background: url(http://dyraheimur.is/web/wordpress/images/bubble_top.gif) no-repeat; padding-top:4px;}
#menu li { margin-left:5px;}
#menu li.pagenav { background: url(http://dyraheimur.is/web/wordpress/images/menu_bubble.gif) no-repeat; padding:6px 0px 0px 30px; height:30px; margin-left:0px; font: bold 14px arial; color:#ffffff;}

/*  
CSS-styles for the ANIga gallery Wordpress Plugin from Michael Naab
http://animalbeach.net
*/

.gallery_clear {
    clear:both;
}

.gallery_list {
    padding-top:25px;
}

.gallery_alignright {
    float: right;
}
.gallery_alignleft {
    float: left;
}

.gallery_aligncenter {
    text-align:center;
}

.gallery_list_p {
    padding-right:10px;
    padding-left:10px;
    width:65%;
}

.gallery_pic_border {
    border:1px solid #ddd;
}

.gallery_select {
    font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

/* this is for a constant viewing position when clicking through pictures */
.gallery_slds_td {
    height:400px;
    width:400px;
    /*this is for black stripes (just like 16 to 9 in TV) */
    background:black;
}

.gallery_slds_table {
    height:400px;
    width:400px;
    border:none;
}

.gallery_thumb_td {
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
/*    border:1px solid #ddd;*/
/*    background-color:#d5d6d7;*/
    font-size:0.9em;
    line-height:0.9em;
}

/*.gallery_slds_filter {
    filter:progid:DXImageTransform.Microsoft.Fade();
}*/

.gallery_error {
    border:1px solid #ddd;
    background:#FFFF99;
    color:#000000;
    padding:10px;
    margin:30px;
    text-align:center;
}

.gallery_meta {
    color: #777;
    padding-top: 5px;
    margin: 30px 0;
    clear: both;
    text-align: center;
}

.gallery_alt {
    margin: 0;
    padding: 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.gallery_pad {
    padding-top: 20px;
}

.gallery_line_h {
    line-height:20px;
}

.gallery_high {
    color:#777;
}





</style>
</head>
<body>
<div id="main">
    <!--<div id="rap">
<h1 id="header"><a href="http://dyraheimur.is/web/wordpress/">Kafari</a></h1>-->
    <div id="header"> <img src="http://dyraheimur.is/web/wordpress/images/banner.gif" alt="Kafari - kafari@kafari.is - 899-9909"/> </div>
    <!-- end header -->
    <!-- begin sidebar -->
    <div id="menu">
        <ul class="top">
            <li class="pagenav">Valmoguleikar</li>
            <li>
                <ul>
                    <li class="page_item current_page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" title="About">About</a></li>
                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=3" title="Prufa">Prufa</a></li>
                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=8" title="Myndagaller&#253;">Myndagaller&#253;</a>
                        <ul>
                            <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=11" title="Myndir">Myndir</a>
                                <ul>
                                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=13" title="Bryggjuvi&#240;ger&#240;ir">Bryggjuvi&#240;ger&#240;ir</a></li>
                                    <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=12" title="Skipavi&#240;ger&#240;ir">Skipavi&#240;ger&#240;ir</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end sidebar -->
    <div id="content">
        <div class="post" id="post-2">
            <h3 class="storytitle"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" rel="bookmark">About</a></h3>
            <div class="storycontent">
                <p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
            </div>
            <!--<div class="feedback">
                    </div>-->
        </div>
    </div>
    <div class="base"><span></span></div>
</div>
</body>
</html>

Read the Faqs on 100% height and putting a footer at the bottom (and also the 3 col sticky thread is relevant to this.)

Hope it helps

**blackman890** · Sep 7, 2007 06:53

Thanks man, your first method worked

I think the main problem I was having is how I displayed the background images and therefore chose the wrong elements.

Thanks again

User Tag List

Thread: How to get content to go 100%

Thread Tools

Display

How to get content to go 100%

Bookmarks

Bookmarks

Posting Permissions