3

I have just started to embrace web mobile design.

I have this HTML markup:

<div id="Screen">
   <div>Header</div>
   <div>Filler</div>
   <div>Main Content</div>
   <div>Footer</div>
</div>

I want to cover the whole screen. The 'Main Content' will be of vaying fixed sizes (for each page). The 'Filler' is just a 'blank space' and its objective is to stretch the whole page down to the bottom of the screen so the footer is at the bottom. i have played arounbd with several styles (relative, inherit, hieght:100%) and i cannot get it to what I want it to do.

Is this a problem to do for mobile devices?

Thanks

Andrew Simpson
  • 6,883
  • 11
  • 79
  • 179
  • Hi, yes I knew that would cause a response :). That was why I put in brackets (for each page). So, in my case I have 4 pages. The main content will be different for each page but it will be an unchanging height for each page – Andrew Simpson Dec 24 '13 at 08:09
  • @nedR hi, thanks for that link. I am checking it now. Seems there are lots of issues with this and multiple answers. Will go through them now. Thanks – Andrew Simpson Dec 24 '13 at 08:12
  • @AndrewSimpson Did you try using JS/Jquery to get the screen size, and then setting the `height` property of those elements based on the size you get? For example, if the height of the browser is fetched as 200px, you can accordingly set the height of 'main content' to 50px with scrolling enabled. For different pages, it's easy. You just need 4 different styles for your container div for each of the 4 pages. – sanjeev mk Dec 24 '13 at 08:24
  • @sanjeevmk Hi, this seems the logical way to go. I am just looking for examples now. Jquery/Javascript are not my normal tools u c. – Andrew Simpson Dec 24 '13 at 08:27

1 Answers1

0

If you want to do it only via CSS, without JS, then the only known-to-work method is to use different stylesheets for each of those pages. Page 1 can use page1.css where the height of that div is set to xyz. Similarly for pages 2,3,4... If you have a small number of pages, you can do that.

Otherwise, you'll need to rely on JQuery for that. Here's a small peek:

$(function(){
    $(window).resize(function(){
        var h = $(window).height();
        var w = $(window).width();

        if( h > 1000){
             $("#yourVaryingElement").css('height', '900px');
        }
        if( h > 700){
             $("#yourVaryingElement").css('height', '600px');
        }
        if( h > 500){
             $("#yourVaryingElement").css('height', '400px');
        }
        // and so on..
    });
});

Remember to run this script after your initial CSS styling. Whoever (the script, the css or inline style) sets the size last will be the winner.

sanjeev mk
  • 4,276
  • 6
  • 44
  • 69