DIV Layout for Mobile screen

This question already has an answer here:

Make a div fill the height of the remaining screen space 31 answers

---

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.

链接地址: http://www.djcxy.com/p/88246.html

上一篇: 使div扩展以占用所有可用空间

下一篇: 移动屏幕的DIV布局