-1

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

我尝试使用它，但它不起作用。

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

这是我体内的代码。

Pastebin 链接：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>

在此处输入图像描述

有任何想法吗？:)

4

2 回答 2

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  */
于 2013-11-03T20:30:08.003 回答
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。

于 2013-11-03T20:19:40.100 回答