Jump to content
jkskovgaard

White space at bottom of big screens

Recommended Posts

jkskovgaard    0
jkskovgaard

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

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 :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Andrew    201
Andrew

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.

 

<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', myBodyHeight)

// If you want to run this on browser window resize as well
$(window).resize(function() {
   
var myBodyHeight = $('body').height()

$(mySelector).css('min-height', myWindowHeight)

});
}) }(window.jQuery); /* ]]> */ </script>
  • Like 1

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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:

http://pressmoo.dk/Wordpress3/

 

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.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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. - http://www.pagelines.com/pros/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bluecloud    3
bluecloud

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>
  • Like 2

Share this post


Link to post
Share on other sites
maceef    0
maceef

bluecloud

 

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×