css - 拉伸(stretch)一个 div 来填满剩余空间？

Question

如何拉伸(stretch) 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>

有什么想法吗？ :)

Answer 1

修复您的 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  */