Jump to content


Photo
- - - - -

White space at bottom of big screens


Best Answer bluecloud , 19 March 2013 - 01:42 PM

Thank for the fix Mr. Powers! Just what I needed.

Although it wasn't working ok in first place. I made a few changes to make it work:

 
<script> /* <![CDATA[ */
!function ($) {
jQuery(document).ready(function() {
 
var myWindowHeight = $(window).height() // window height
,   mySelector = '.section-content-area > .texture > .content'
 
//  ^^ what you're setting to window height (play with this)
 
 
$(mySelector).css('min-height', myWindowHeight)  //<-- changed from myBodyHeight
 
// If you want to run this on browser window resize as well
$(window).resize(function() {
    
var myBodyHeight = $('body').height()
 
$(mySelector).css('min-height', myBodyHeight) // <-- changed from myWindowHeight
 
});
}) }(window.jQuery); /* ]]> */ </script>
Go to the full post


  • Please log in to reply
34 replies to this topic

#21 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 March 2013 - 08:16 PM

I use this on my site (using PlatformPro), but it doesn't work on yours...

 

Please Login or Register to see this Hidden Content

 

Not sure why... but have a play around with it. :)



#22 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 06 March 2013 - 08:35 PM

Thank you Jenny - don't see how setting a negative margin will solve the stretch to 100% height issue though?



#23 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 07 March 2013 - 04:53 AM

On my site, it isn't a non-100% issue, it's a hidden padding/margin somewhere. The code above has worked on all of my PlatformPro sites to get rid of the extra spacing but I'm not sure why it isn't working on your site.



#24 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 07 March 2013 - 08:29 PM

Ok, thank you Jenny - but do you understand what my trouble is? I'm trying to make the content area stretch all the way to the bottom of the screen. It doesn't do that unless you have content tall enough for it to do so.

 

Unlike the default 100% width setting it isn't possible to set a 100% height property, as far as I can see.

 

 

I think what you're talking about is the couple of pixels black space at the top and bottom that you'd normally get on a platformpro site. But if you look at my test-site I don't have that:

 

Please Login or Register to see this Hidden Content



#25 James B

James B

    Advocate

  • Members

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

Posted 08 March 2013 - 12:33 AM

Just an update to let you know this has been emailed over to get some more info from the core team, haven't had a response to confirm yet, but people are having a look into it. As soon as I know abit more I'll let you know.



#26 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 08 March 2013 - 03:31 PM

Thank you James, hope they'll figure it out!



#27 James B

James B

    Advocate

  • Members

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

Posted 09 March 2013 - 04:49 AM

I'll have some form of answer/update to this on Monday, will keep you posted



#28 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 12 March 2013 - 07:09 PM

Tuesday Bump!



#29 James B

James B

    Advocate

  • Members

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

Posted 13 March 2013 - 12:25 AM

Have Dm'd you. Still working on this. Will have an answer shortly, had to go further up the command chain to get more info :-)



#30 arpowers

arpowers

    Founder

  • Administrators
  • 3271 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3
  • Country: Country Flag

Posted 14 March 2013 - 08:25 PM

Alright, @James called me in on this one.. 

This is a particularly challenging problem in pure CSS as CSS doesn't allow 'height: 100%' in content based context. 

 

Therefore, i'm going to recommend adding a little bit of Javascript as a quick fix. 

 

Add this to your headerscripts option, and note that it is untested, but at least close to what you're looking for. (let us know if it doesn't work)

 

You may have to play with selectors, etc... It essentially get the window height, and sets something else to that height.

 

Please Login or Register to see this Hidden Content


  • James B likes this

#31 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 16 March 2013 - 08:05 PM

Erhm... Mr. Powers, thank you for getting back to me here. But seriously? Javascript?

 

I replaced the Pagelines Theme with the naked Toolbox theme and set up a few css rules. ...And made the #content stretch to the bottom of the screen in like 5 seconds. Ok, minutes, but who's counting.

 

Please have a look:

Please Login or Register to see this Hidden Content

 

Obviously it's possible to call height:100% in CSS. The problem in Pagelines (I think) is that there are so many surrounding containers and that we'd have to set the height property in each and everyone.

 

But it should most definitly  be possible without Java I'm very sure??

 

 

Cheers,

Jens.



#32 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 17 March 2013 - 09:32 AM

Its most likely possible with CSS and CSS only, but like Andrew mentions above, its going to be very tricky due to the layout of PageLines Framework, if you wish to give this attempt with CSS, you're free to do so.

 

If you require some assistance, I recommend contacting one of our Pros. -

Please Login or Register to see this Hidden Content



#33 bluecloud

bluecloud

    Advanced Member

  • Members
  • 44 posts
  • LocationHillegom
  • Framework Version:latest (always)
  • Country: Country Flag

Posted 19 March 2013 - 01:42 PM   Best Answer

Thank for the fix Mr. Powers! Just what I needed.

Although it wasn't working ok in first place. I made a few changes to make it work:

Please Login or Register to see this Hidden Content


  • alexisk and greenfly like this

#34 maceef

maceef

    Newbie

  • Members
  • 4 posts

Posted 22 July 2013 - 10:29 AM

@

Please Login or Register to see this Hidden Content

 

Can you provide an example to set the maximum hight to say 400 px or 80%.

Problem with the above script is that drops the footer area below the viewport



#35 James B

James B

    Advocate

  • Members

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

Posted 22 July 2013 - 09:47 PM

Hi there, the framework css is set to a min-height of 400px by default.