jQuery-Mobile内容区域头脚高度100%答案

【问题标题】：JQuery-Mobile content area 100% height between head and footjQuery-Mobile内容区域头脚高度100%
【发布时间】：2011-11-18 17:54:51
【问题描述】：

关于这方面的话题很多......但不明白如何去做。

我有我的 JQM 页眉和页脚。我希望内容区域填充头和脚之间的 100% 高度。

这是我的代码，怎么可能？

<body>
        <div data-role="page" id="entryPage" data-theme="d">

        <div data-role="header" id="header" data-position="fixed" data-theme="d">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="content" data-theme="d">

             <div id="columnwrapper">
                <div id="leftcolumn">
                    <div class="innertube">
                        Point 1
                    </div>
                    <div class="innertube">
                        Point 1
                    </div>
                </div>
            </div>

            <div id="rightcolumn">
                <div class="innertube">
                    <div id="switch1">
                        test
                    </div>
                </div>
                <div class="innertube">
                    test2
                </div>

            </div>

            <div id="contentcolumn">
                <div class="innertube">Content</div>
                <div class="innertube">Content</div>
            </div>

        </div><!-- /content -->
        <div data-role="footer"  id="footer" data-position="fixed" data-theme="d">

            <div id="switch2">
                <a href="#foo" data-role="button" data-icon="arrow-u">Expand main menu</a>
            </div>

        </div><!-- /footer -->
    </div><!-- /page -->
</body>

CSS：

#columnwrapper{
    float: left;
    width: 100%;
    margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
    background-color: #C8FC98;

}

#leftcolumn{
    margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
    background: #C8FC98;
}

#rightcolumn{
    float: left;
    width: 40px; /*Width of right column*/
    margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
    background: yellowgreen;
}

#contentcolumn{
    float: left;
    width: 75%; /*Width of content column*/
    background-color: blue;
}

.innertube{
    margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;

}

其实内部区域只根据内容填充高度...意思是 2 div 2 行，但不是 100%..

谢谢

【问题讨论】：

不要使用 jquery css，这不好，你需要你自己的页脚设置为固定位置，溢出;自动和底部：0 然后你的头会在几分钟内粘贴代码

标签： header jquery-mobile height footer

【解决方案1】：

CSS position: fixed 在移动浏览器中无法正常工作。我的经验是使用 Android 和 iOS 浏览器，它们都没有正确地暗示 position: fixed（iOS 5 浏览器例外，但它仍处于测试阶段）。

当用户在移动浏览器中滚动时，它往往被视为position: absolute 并在页面滚动时移动，而不是将元素固定在屏幕上并且不移动它。

同样使用 CSS overflow 属性将不允许在大多数移动设备上滚动（iOS 支持它，但用户必须知道在可滚动 div 中滚动时使用两根手指）。

您可以使用 CSS，但请注意您需要使用 position: absolute，或者您可以使用 JavaScript 设置元素的高度。

这是一个使用 JavaScript 设置伪页面元素高度的 jQuery Mobile 解决方案：

$(document).delegate('#page_name', 'pageshow', function () {
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});

要获得完美的效果，您需要考虑目标设备地址栏的行为，因为如果您想要全屏网页，则必须将地址栏的高度添加到页面的高度。

【讨论】：

它目前做得有点过头了，页脚总是低于可见区域..你知道为什么吗？
似乎忽略了状态栏，如果你也休息一下android状态栏的高度似乎就对了
@zyrex 工具栏 outerHeight() 除了当前的 content div 高度外，还应考虑。 stackoverflow.com/a/21553307/1771795
@jasper，你测试过你的代码吗？我试过你的代码，但它崩溃了。想了很久，我发现设置高度写得不正确。例如。 $(this).find('[data-role="header"]').height() 应该是 $($(this).find('[data-role="header"]')).height( )。
@Franva 您的更新对我来说没有多大意义，您正在使用已经是一个 jQuery 对象并从中制作另一个对象。应该没有任何用处。但是，我确实注意到我的代码缺少尾随括号和分号。因此，如果您只是简单地复制和粘贴，您可能会因此遇到解析错误。

【解决方案2】：

谢谢，贾斯珀！这对我帮助很大。

我不得不花很多时间来让它与多个页眉/页脚一起工作，并考虑到 ios 中的 url 栏。我想我会为其他遇到此问题的人分享我的解决方案。到目前为止，这在 ios 模拟器中对我有用，但我很想知道它在其他设备上是如何工作的。

/* detect device */
var ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    android = ~ua.indexOf('Android');


$(document).delegate('#the_page', 'pageshow', function () {
    var $page = $(this),
        $target = $(this).find('.fullHeight'),
        t_padding = parseInt($target.css('padding-top'))
                    + parseInt($target.css('padding-bottom')),
        w_height = (ios)? screen.height-65: $(window).height();     // "-65" is to compensate for url bar. Any better ideas?
        headFootHeight = 0;

    // Get total height for all headers and footers on page
    $page.find('[data-role="footer"], [data-role="header"]').each(function() {
        var myTotalHeight = $(this).height()
                            + parseInt( $(this).css('padding-top') )
                            + parseInt( $(this).css('padding-bottom') );
        headFootHeight += myTotalHeight;
    });

    var the_height = (w_height - headFootHeight);           

    $page
     .height(w_height)
     .find('.fullHeight')
     .height(the_height - t_padding);
});

此脚本在 '.fullHeight' 上设置 100% 的高度，而不是 [data-role=content] 以提供更大的灵活性，但您可以将 fullHeight 类添加到您的 [data-role=content] 元素。

我仍然遇到的一个问题是补偿 ios 中的 url 栏，并找到一个适用于跨设备的窗口高度。有什么想法吗？

【讨论】：

+1 它就像一个魅力.. 非常感谢。你拯救了我的一天。
@geekay_gk - 当我使用网络浏览器时，这是否也会自动设置内容的高度？因为就我而言，整个页面都有一个滚动条，而我需要的是内容 div 内的全屏谷歌地图。在我没有自己的移动应用程序的情况下使用移动应用程序真的很难。
我已经在我的安卓模拟器中试过了。它并不真正适合我的屏幕分辨率。帮忙？

【解决方案3】：

CSS：

footer {
            display: block;
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            height: 50px;
            background-color: #333;
            overflow: hidden;
            z-index:1000;
            -webkit-transform: translateZ(0);
            opacity:.9;
        }

    header{
        display:block;
        position: fixed;
        left:0;
        right:0;
        top:0;
        height:50px;
        overflow: hidden;
    }

    section{
        display:block;
        position:fixed;
        left:0;
        top:50px;
        bottom:50px;
        right:0;
        overflow-y: auto;
    }

    nav{
        display:block;
        height:100%;
        -webkit-backface-visibility: hidden;
    }

    .body{
        overflow-y: hidden;
    }
    .bar {
border: 1px solid       #2A2A2A;
background:             #111111;
color:                  #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image:      -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image:         linear-gradient(top, #3c3c3c, #111);
  }

唯一需要的html：

  <header class="bar" id="AllHead"></header>

  <div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->

  <footer class="bar" id="allFoot"></footer>

 </div><!-- /page -->

然后您可以在页脚和底部导航栏中设置您想要的任何项目无论发生什么情况，这总是看起来正确，而且每次您触摸某物时它都不会闪烁。希望对你有帮助

【讨论】：

arg，这在 safari (ipad) 上不起作用……你不能再滚动了，知道帮助吗？谢谢