伸展div以填补剩余空间？

Question

如何拉伸div以填充页面的剩余空间？

我尝试使用它，但它没有用。

    #home, #menu {
    height: 100%;
    width: 100%;
}

这是我体内的代码。

Pastebin Link：http://pastebin.com/WzRVsUG2

 <div data-role="page"  id="home"  >
        <div data-role="header" class ="bgimg" >
            <h1></h1>

        </div>

        <div id="menu" data-role="content" data-dom-cache="true" data-theme="c" class ="bgimg1">   
        <div><h2>Order delicious food now!</h2></div>

                 <a id= "Pizza" href = "#indexPizza" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick= "">Pizza</a>    

                 <a id="FastFood" href = "#indexFastfood" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick="" >Fast Food</a>

                 <a id="IndianFood" href = "#indexIndianfood" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick="" >Indian Food</a>

                 <a id="KoreanFood" href = "#indexKoreanfood" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick="" >Korean Food</a>

                 <a id="Restaurant" href = "#indexRestaurantfood" data-role="button" data-icon="arrow-r" data-iconpos="right" 
                        data-transition="flow" onclick= "" >Restaurant</a>      


        </div>

    </div>

有什么想法吗？ ：）

Answer 1

获取正确的最大内容高度

如果页面页眉和页脚具有恒定的高度内容div可以通过一点css技巧轻松设置为覆盖整个可用空间：

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

以下是 Google maps api3 演示的实例：http://jsfiddle.net/Gajotres/7kGdE/

此方法可用于获取正确的最大内容高度，并且必须与 pageshow 事件一起使用。

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

这是一个实时的jsFiddle示例：http://jsfiddle.net/Gajotres/nVs9J/

有一点需要记住。此功能将正确地为您提供最大可用内容高度，同时它可用于拉伸相同的内容。不幸的是，它不能用于将img拉伸到全内容高度，img标签的开销为3px。

Answer 2

修复你的CSS。

body, html { height:100%; }

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}/* < missing brace */

body {
    margin: 0;
}

#home, #menu {
    height: 100%;
    width: 100%;
}

/* }     < extra brace  */