jquery mobile将我的屏幕大小设置为100％

我正在尝试为iPad上使用的html5应用设置我的主布局。起初，我的内容只与其中包含的数据一样大。所以我决定尝试将左侧面板和主面板的高度设置为“窗口”尺寸减去“页脚”尺寸。做完这些之后，它仍然没有进入我的屏幕全长，但它也会超出我的屏幕大小，导致第二个滚动条。jquery mobile将我的屏幕大小设置为100％

这是jsFiddle。

下面是一个更快一览代码：

<!DOCTYPE html> 
<html style="height: 100%"> 
<head> 
    <meta charset="utf-8" /> 
    @*<meta name="viewport" content="width=device-width" />*@ 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, height=device-height, width=device-width, user-scalable=no"> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    <meta name="description" content="WrestleStat" /> 
    <link rel="stylesheet" href="~/Content/jQueryMobile/jquery.mobile-1.4.0.css" /> 
    <script src="~/Scripts/jquery-1.8.2.js" type="text/javascript"></script> 
    <script src="~/Scripts/jQueryMobile/jquery.mobile-1.4.0.js" type="text/javascript"></script> 
    <style> 
     div>ul>li>a.ui-btn{ 
      height: 60px; 
     } 
    </style> 
</head> 
<body style="height: 100%"> 
    <!-- 
     We want to have 4 main sections in our master layout 
     1) A left panel to select/search the different locations 
     2) Primary panel 
     3) Footer to act like a tab screen 
    --> 
    <div role="main" class="ui-content jqm-content" style="padding: 0; height: 100%"> 
     <div class="ui-grid-a"> 
      <div id="panelLeft" class="ui-block-a" style="width: 20%; background-color: black; color: white; min-height: 768px;"> 
       @RenderSection("panelLeft", true) 
      </div> 
      <div id="panelMain" class="ui-block-b" style="width: 80%; background-color: gold; min-height: 768px;"> 
       @RenderBody() 
      </div> 
     </div> 

     <div id="footer" data-role="footer" data-theme="b" data-position="fixed" style="height: 60px"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#" style="font-size: x-large">Nav One</a></li> 
        <li><a href="#" style="font-size: x-large">@RenderSection("footer")</a></li> 
        <li><a href="#" style="font-size: x-large">Nav Three</a></li> 
        <li><a href="#" style="font-size: x-large">Nav Four</a></li> 
        <li><a href="#" style="font-size: x-large">Nav Five</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var windowHeight = $(window).height(); 
     var footer = $("#footer"); 
     var footerHeight = footer.outerHeight() -1; 

     $(".ui-grid-a").height(windowHeight - footerHeight); 
     $("#panelLeft").height(windowHeight - footerHeight); 
     $("panelMain").height(windowHeight - footerHeight); 
    }); 
</script>

我希望能够只拥有的一切是屏幕尺寸的100％，而iPad的迷你设定的最小尺寸（我相信是768px）。我不相信我们会有超出观看区域的内容，但以防万一，在这种情况下需要垂直滚动。不过，我并不担心这一点。

编辑/注：我才意识到，你不能得到的jsfiddle屏幕足够大，看看是什么问题？需要去全屏幕1920×1080的显示器上。

Update1： 1或2像素滚动是固定的。现在我只需要让我的主要“面板”完全100％ - 页脚大小。

来源

2014-01-27 ganders

废话，我的jQuery的panelMain失踪前面的井号标签再用/英镑的象征。它现在有效！

来源

2014-01-27 17:12:56 ganders

试试这个。

<META name="viewport" content="initial-scale=1.0, maximum-scale=1.0, height=device-height, width=device-width, user-scalable=no">

希望这会有所帮助。

来源

2014-01-27 16:42:12

适用于左侧面板，但主面板仍然短小。窗口还有大约1或2个像素的卷轴。 – ganders

您是否尝试将HTML，Body和任何容器设置为高度：100％; ？ –

刚刚试过，没有区别... – ganders

这通常为我工作

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

来源

2014-01-27 16:47:09 Dan

jquery mobile将我的屏幕大小设置为100％

回答

相关问题