JQuery-Mobile內容區域頭部和腳之間的高度爲100％

很多關於此的主題......但沒有明確指出如何去做。JQuery-Mobile內容區域頭部和腳之間的高度爲100％

我有我的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％..

感謝

來源

2011-09-16 zyrex

不使用jquery css，這是不好的，你需要你自己的頁腳，設置爲固定位置，溢出;自動，和底部：0，然後一個爲你的頭會粘貼代碼在最小 – davethecoder

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); 
});

得到你需要考慮到目標設備的地址欄，因爲行爲的完美的完成如果您想要全屏網頁，則必須將地址欄的高度添加到頁面的高度。

來源

2011-09-16 19:33:44 Jasper

它目前做的太多了，頁腳總是低於可見區域..你知道爲什麼嗎？ – zyrex

這似乎忽略了狀態欄，如果你還要休息android狀態欄的高度吧 – Daniel

@zyrex工具欄'outerHeight（）'應該考慮除了當前的_content_ div高度。 http://stackoverflow.com/a/21553307/1771795 – Omar

the 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 -->

，那麼你可以設置你想要的頁腳和底部導航欄這將永遠看的權利，不管發生什麼事，也該不會閃光裏面什麼項目每次你碰到什麼東西都關掉。希望它有幫助

來源

2011-09-16 16:38:14 davethecoder

arg，這不是在safari（ipad）上工作......你不能再滾動，知道一些幫助？謝謝 – zyrex

謝謝，賈斯珀！這幫助了我很多。

我不得不亂搞很多，才能使它與多個頁眉/頁腳一起工作，並且要解釋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％的高度，而不是[數據角色=內容]讓更多的靈活性，但你可以添加fullHeight類到您的[數據角色=內容]元素。

我仍然有一個問題是補償ios中的url欄，並找到跨設備工作的窗口高度。有關於此的任何想法？

來源

2012-02-05 15:05:12 eschwartz

'+ 1'它像魅力一樣工作..非常感謝。你救了我的一天。 – thesummersign

@geekay_gk - 當我使用網絡瀏覽器時，這也會自動設置內容的高度嗎？因爲在我的情況下，整個頁面都有一個滾動條，我需要的是內容div中的全屏Google Maps。當我沒有自己的移動應用時，真的很難。 – JetPro

我已經在我的Android模擬器中試過了。它不適合我的屏幕分辨率。幫幫我？ – JetPro

JQuery-Mobile內容區域頭部和腳之間的高度爲100％

回答

相關問題