Jump to content


Photo
- - - - -

Page Height 100%

page height

  • Please log in to reply
9 replies to this topic

#1 mccooluk

mccooluk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 22 October 2012 - 09:23 PM

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:

Please Login or Register to see this Hidden Content



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

Chris

#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 October 2012 - 11:04 PM

Hi there, you could try the following css

Please Login or Register to see this Hidden Content



#3 mccooluk

mccooluk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 23 October 2012 - 09:17 AM

Unfortunately it didn't work.

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

Please Login or Register to see this Hidden Content



Thanks

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 23 October 2012 - 03:04 PM

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)

#5 mccooluk

mccooluk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 23 October 2012 - 03:26 PM

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;
}

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 23 October 2012 - 04:13 PM

I've used this CSS solution before with success:

Please Login or Register to see this Hidden Content

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?

#7 mccooluk

mccooluk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 23 October 2012 - 04:58 PM

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

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 October 2012 - 09:39 PM

Try adding this:

Please Login or Register to see this Hidden Content


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.

#9 mccooluk

mccooluk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 25 October 2012 - 09:08 AM

Still no luck unfortunately.

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

Any other ideas?

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 25 October 2012 - 02:32 PM

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.