-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 を簡単に設定して、利用可能なスペース全体をカバーすることができます。

#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/

覚えておくべきことが1つあります。この関数は、利用可能なコンテンツの最大高さを正しく取得すると同時に、同じコンテンツを引き伸ばすために使用できます。残念ながら、img をコンテンツの高さいっぱいまで引き伸ばすために使用することはできません。img タグには 3px のオーバーヘッドがあります。

于 2013-11-03T20:19:40.100 に答える