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％

回答

相关问题