Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Frank Drebin
Frank Drebin
8,204 Points

Resolved. Zurb foundation - create a centred body height at 100%

Hello, longtime listener, first time caller here ;)

I am creating a wordpress and zurb foundation responsive site.

The background of the body has a repeating small pattern image.

The content is to be all centered and to run at 100% of the page height.

So basically the page looks like a black background (really a repeating image) with a big white stripe running down the center of the page at 100% height, with the content inside of that white stripe.

The content, in this order... -big logo centered

  • main body content
  • footer and widgets. can all run straight after the other, and the footer doesn't have to appear at the bottom of the page.

The problem I'm having is ensuring the page runs at 100% of the screen height (I.e. the white stripe goes to the bottom of the page), even on large screens. Please note that the content is dynamic as it is generated by wordpress.

Please see this link for more info - http://flic.kr/p/ieYZA9

Ben

1 Answer

Frank Drebin
Frank Drebin
8,204 Points
Frank Drebin
Frank Drebin
8,204 Points

To resolve this problem,I simply started again from scratch.

To anyone interested here is the basic mark up

<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
#outer {
/* width:960px; */
margin:auto;
background:#fcf;
min-height:100%;
background-color: #ffffff;
background-image:url("<?php bloginfo('template_directory'); ?>/ MY IMAGE");
background-repeat: repeat-y;
background-position:center center;
}
* html #outer{height:100%}/* IE6 only*/
</style>

<body>

    <div id="outer" class="row">

        <div class="large-12 columns">

                        MY CONTENT
                </div><!-- large-12 columns -->




 </div><!-- end id outer class row -->






  <?php wp_footer(); ?>


 </body>```