如何使用 jquery mobile 创建 100% 高度的 div? [英] How to create div with 100% height with jquery mobile?

查看：16
本文介绍了如何使用 jquery mobile 创建 100% 高度的 div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何创建具有 100% 高度的 id=test 的 div?

<div data-role="header"><h1>标题</h1></div><!--/header --><div data-role="内容"><div data-role="fieldcontain"><input type="range" name="slider1" id="slider1" value="0" min="0" max="255"/>
<div id=测试高度=100%>

</div><!--/content --><div data-role="footer" data-position="fixed"></div><!--/footer --></div><!--/page -->

解决方案

好的，这就是我为您准备的.但是请记住，如果页面的内容很高，这可能不太有用.滑动区域是内容下方的所有内容.所以随着内容区域变大，滑动区域变小.

<头><meta charset="UTF-8"><title>jQuery Swipe</title><link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/><script src="jquery-mobile/jquery.min.js" type="text/javascript"></script><script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script><script src="phonegap.js" type="text/javascript"></script><脚本>$(document).ready(function() {//设置初始窗口(假设它永远是#1window.now = 1;//获取所有页面的数组并计数windowMax = $('div[data-role="page"]').length;$('.swipeArea').bind('swipeleft', turnPage);$('.swipeArea').bind('swiperight', turnPageBack);});//用于绑定翻页控件的命名处理程序函数turnPage(){//检查我们是否已经在最高数字页面如果(window.now <风格>正文，div[数据角色=页面"]，div[数据角色=内容"]，.swipeArea {高度:100%；宽度:100%；}</风格><身体><div data-role="page" id="device1""><div data-role="header"><h1>第一页</h1>

<div data-role="内容">内容<div class=swipeArea></div>

<div data-role="footer" data-position="fixed"><h4>页脚</h4>

<div data-role="page" id="device2" style="height: 100%"><div data-role="header"><h1>内容2</h1>

<div data-role="content" style="height: 100%">内容<div data-role="fieldcontain"><label for="slider">输入滑块:</label><input type="range" name="slider" id="slider" value="0" min="0" max="100"/>

<div class=swipeArea></div>

<div data-role="footer" data-position="fixed"><h4>页脚</h4>

<div data-role="page" id="device3" style="height: 100%"><div data-role="header"><h1>内容3</h1>

<div data-role="content" style="height: 100%">内容<div class=swipeArea></div>

<div data-role="footer" data-position="fixed"><h4>页脚</h4>

<div data-role="page" id="device4" style="height: 100%"><div data-role="header"><h1>内容4</h1>

<div data-role="content" style="height: 100%">内容<div class=swipeArea></div>

<div data-role="footer" data-position="fixed"><h4>页脚</h4>

How to create div with id=test with 100% height? 

<div data-role="page" id="device1">
    <div data-role="header">
        <h1>Title</h1>
    </div><!-- /header -->
    <div data-role="content">
      <div data-role="fieldcontain">
        <input type="range" name="slider1" id="slider1" value="0" min="0" max="255"  />
      </div>
      <div id=test height=100%>
      </div>    
    </div><!-- /content -->
<div data-role="footer" data-position="fixed">
    </div><!-- /footer -->
</div><!-- /page -->

解决方案

OK, here is what I have for you. Keep in mind though, if the content of the page is tall at all this might not be very usable. The swipe area is everything below the content. So as the content area gets bigger the swipe area gets smaller.

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Swipe</title>

    <link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>

    <script src="phonegap.js" type="text/javascript"></script>

    <script>
        $(document).ready(function() {

            // Set the initial window (assuming it will always be #1
            window.now = 1;

            //get an Array of all of the pages and count
            windowMax = $('div[data-role="page"]').length; 

           $('.swipeArea').bind('swipeleft', turnPage);
           $('.swipeArea').bind('swiperight', turnPageBack);
        });

        // Named handlers for binding page turn controls
        function turnPage(){
            // Check to see if we are already at the highest numbers page            
            if (window.now < windowMax) {
                window.now++
                $.mobile.changePage("#device"+window.now, "slide", false, true);
            }
        }

        function turnPageBack(){
            // Check to see if we are already at the lowest numbered page
            if (window.now != 1) {
                window.now--;
                $.mobile.changePage("#device"+window.now, "slide", true, true);
            }
        }
        </script> 

        <style>
            body, div[data-role="page"], div[data-role="content"], .swipeArea {
                height: 100%;
                width: 100%;
            }
    </style>
</head> 
<body> 

<div data-role="page" id="device1"">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        Content 
        <div class=swipeArea></div>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device2" style="height: 100%">
    <div data-role="header">
        <h1>Content 2</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div data-role="fieldcontain">
            <label for="slider">Input slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
        </div>
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device3" style="height: 100%">
    <div data-role="header">
        <h1>Content 3</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device4" style="height: 100%">
    <div data-role="header">
        <h1>Content 4</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

这篇关于如何使用 jquery mobile 创建 100% 高度的 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆