Page Height 100%

[mccooluk 1]

Hi, I was wondering if somebody could help me set the page height to 100%of the browser window.

Here is an example of what I am trying to achieve:

http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

I have followed the instructions but can't get it to work. Any help would be much appreciated.

Chris

[James B 436]

Hi there, you could try the following css

.section-sb_footcols {

    bottom: 0;

    margin: 0;

    position: absolute;

}

[mccooluk 1]

Unfortunately it didn't work.

This is the page I am trying to make it work for:

http://www.lodge-uhlenbrock.com/content/

Thanks

[catrina 103]

What other CSS do you have right now? (When keeping the footer at the bottom, other CSS code is needed to make sure the content above the footer is also set up correctly to make sure the footer stays at the bottom)

[mccooluk 1]

Hi, below is what I did have. However, to make it easier to get this issue solved first, I have now removed all CSS (I have tried the code above on its own, but no luck)

/* BORDER TRANSPARENT */

hr, .fpost, .clip_box, .widget-title, #buddypress-page .item-list li, .metabar a, #morefoot .widget-title, #site #dsq-content h3, .post.fpost .entry, #soapbox .fboxinfo, #primary-nav #nav_row, .fpost.sticky {

border-color: transparent;

}

/* REMOVE BORDERS */

hr, .fpost, .clip_box, #buddypress-page .item-list li, .metabar a, #morefoot .widget-title, #site #dsq-content h3, .post.fpost .entry, #soapbox .fboxinfo, #primary-nav #nav_row, .fpost.sticky {

border-color: transparent;

}

/* CONTENT BUTTON SPACING */

p, .p, .hentry ul, .hentry ol {

margin: 0.8em 0;

}

/* MARGIN ABOVE CONTENT */

.fullwidth #column-main .mcolumn-pad {

margin-top: 40px;

}

/* LINE HEIGHT */

.hentry, .fpost .post-excerpt {

line-height: 25px;

}

p, .p, .hentry ul, .hentry ol {

color: #CECECE;

margin: 30px;

}

.page-id-50 p, .page-id-50 .p, .page-id-50 .hentry ul, .page-id-50 .hentry ol {

margin: 0 0 !important;

}

/* CONTENT WIDTH */

#site .content, #footer .content {

max-width: 1396px !important;

}

/* NEW NAV ARROWS */

.widget-title {

display: none;

}

.sidebar_widgets .fix {

display: inline-block;

}

.page-id-50 #morefoot_area .content-pad {

padding-left: 49%;

}

.page-id-28 #morefoot_area .content-pad {

padding-left: 50%;

}

.page-id-13 #morefoot_area .content-pad {

padding-left: 49%;

}

/* ARROW SIZE */

.widget_sp_image-image-link .alignleft {

max-width: 25px !important;

}

/* SPACE ABOVE ARROWS */

.hentry-pad {

padding: 0;

}

/* ARROWS PADDING */

.widget-pad {

padding: 0;

}

/* LINK HOVER */

.hentry a:hover {

text-decoration: none;

}

[catrina 103]

I've used this CSS solution before with success: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/. It'll require tweaking, however, since you'll need to adjust it for the content area and footer area. Also, on your site, your footer columns are showing in rows. Is that your intention?

[mccooluk 1]

Thanks, but what I dont understand (and sorry if Im being stupid here), is how do i change the HTML structure of the Pagelines Framework to put the Header and Content ina Container Div as per the tutorial?

Also, it's a Universal Sidebar with a couple of images in the Morefoot area which is why it's coming out as rows (without the CSS)

Thanks again for your help

[Rob 547]

Try adding this:

#content .content-pad {

    padding-top: 0;

}

#page, #dynamic-content {

    height: 100%;

    min-height: 400px;

}

That sets the page and dynamic content to 100%, removing the 10px top padding for the content pad. Small gains, but it works.

Your code has a 40px margin at top and 30px all around padding.

[mccooluk 1]

Still no luck unfortunately.

Just to be clear, I have no extra code added.

Any other ideas?

[catrina 103]

Is the Twitter bar the only section you plan on adding to your footer? If so, maybe it's that section inside the Footer that needs to be pushed down.