• 0

White space at bottom of big screens

Question

Posted · Report post

Hi!

 

How do I make the background tiling go all the way to the very bottom of the screen, whatever screens size?

 

I've added a tiled background image to my site, but on pages with little or no content, the tiling stops at some point. This means the background color shows at the bottom of the screen, especially on larger screens.

 

I'd like the tiling and the content background to continue to the very bottom.

 

(If you're on a small screen, try zooming out your browser and you willl see what I'm talking about).

 

 

Here's an example:

http://www.lietzen-ms.dk/

Share this post


Link to post
Share on other sites

34 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Tuesday Bump!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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>
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

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