Question

我有一个网络应用程序的布局，并一直试图解决为什么iScroll-4（http://cubiq.org/iscroll-4）似乎与JQuery动画功能冲突。然而，事实证明它没有。问题是包含DIV的CSS高度值。

我的HTML和CSS遵循横向定位，iPad设置应用程序样式的Web应用程序。右手面板应在5秒后向左滑动，但将视口DIV样式更改为高度：724px会使其中断。

我想知道是否有人可以告诉我为什么更改样式表中的注释行会产生影响呢？

以下HTML引用了JQuery的1.7版本和iScroll的版本4。

的index.html：

<!DOCTYPE html>
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

    <script src="jquery-1.7.min.js" type="text/javascript" language="javascript"></script>
    <script type="text/javascript" language="javascript" src="iscroll.js"></script>
    <script type="text/javascript" language="javascript">
        function slide() {
            $("#content").animate({left: -724});
        }
        setTimeout("slide()", 5000);

        var scrollNav, scrollList, scrollBody;

        function loaded() {
            scrollNav = new iScroll('navcontainer');
            scrollList = new iScroll('listcontainer');
            scrollBody = new iScroll('articlecontainer');
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
    </script>
</head>
<body>
    <div id="page" class="flip">
        <!-- navigation -->
        <div id="nav">
            <div id="navheader" class="header">page.nav.navheader</div>
            <div id="navcontrols" class="controls">page.nav.navcontrols</div>
            <div id="navcontainer" class="container">
                <div id="navscroller" class="scroller">
                    <div id="navpulldown" class="pulldown">
                        ...navscroller.navpulldown
                    </div>
                    <ul id="navitems" class="items">
                        <li class="item navitem">...navscroller.listitems.navitem.1</li>
                        <li class="item navitem">...navscroller.listitems.navitem.2</li>
                        <li class="item navitem">...navscroller.listitems.navitem.3</li>
                        <li class="item navitem">...navscroller.listitems.navitem.4</li>
                        <li class="item navitem">...navscroller.listitems.navitem.5</li>
                        <li class="item navitem">...navscroller.listitems.navitem.6</li>
                        <li class="item navitem">...navscroller.listitems.navitem.7</li>
                        <li class="item navitem">...navscroller.listitems.navitem.8</li>
                        <li class="item navitem">...navscroller.listitems.navitem.9</li>
                        <li class="item navitem">...navscroller.listitems.navitem.10</li>
                        <li class="item navitem">...navscroller.listitems.navitem.11</li>
                        <li class="item navitem">...navscroller.listitems.navitem.12</li>
                        <li class="item navitem">...navscroller.listitems.navitem.13</li>
                        <li class="item navitem">...navscroller.listitems.navitem.14</li>
                        <li class="item navitem">...navscroller.listitems.navitem.15</li>
                        <li class="item navitem">...navscroller.listitems.navitem.16</li>
                        <li class="item navitem">...navscroller.listitems.navitem.17</li>
                        <li class="item navitem">...navscroller.listitems.navitem.18</li>
                        <li class="item navitem">...navscroller.listitems.navitem.19</li>
                    </ul>
                    <div id="navpullup" class="pullup">
                        ...navscroller.navpullup
                    </div>
                </div>
            </div>
            <div id="navfooter" class="footer">page.nav.navfooter</div>
        </div>
        <!-- main content -->
        <div id="viewport">
            <div id="content">
                <!-- list -->
                <div id="list">
                    <div id="listheader" class="header">page.content.list.listheader</div>
                    <div id="listcontrols" class="controls">page.content.list.listcontrols</div>
                    <div id="listcontainer" class="container">
                        <div id="listscroller" class="scroller">
                            <div id="listpulldown" class="pulldown">
                                page.content.list.listcontainer.listscroller.listpulldown
                            </div>
                            <ul id="listitems" class="items">
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.1</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.2</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.3</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.4</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.5</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.6</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.7</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.8</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.9</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.10</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.11</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.12</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.13</li>
                                <li class="item listitem">page.content.list.listcontainer.listscroller.listitems.listitem.14</li>
                            </ul>
                            <div id="listpullup" class="pullup">
                                page.content.list.listcontainer.listscroller.listpullup
                            </div>
                        </div>
                    </div>
                    <div id="listfooter" class="footer">page.content.list.listfooter</div>
                </div>
                <!-- article -->
                <div id="article">
                    <div id="articleheader" class="header">page.content.article.articleheader</div>
                    <div id="articlecontrols" class="controls">page.content.article.articlecontrols</div>
                    <div id="articlecontainer" class="container">
                        <div id="articlescroller" class="scroller">
                            <div id="articlepulldown" class="pulldown">
                                page.nav.navcontrols.navcontainer.navscroller.articlepulldown
                            </div>
                            <div id="articlebody" class="bodycontent">
                                page.content.article.articlecontainer.articlescroller.articlebody
                            </div>
                            <div id="articlepullup" class="pullup">
                                page.nav.navcontrols.navcontainer.navscroller.articlepullup
                            </div>
                        </div>
                    </div>
                    <div id="articlefooter" class="footer">page.content.article.articlefooter</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

的ipad-landscape.css：

/* elements */
body
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
}

div
{
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
}

ul
{
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    list-style-type: none;
}


/* classes */

.header
{
    width: 100%;
    height: 44px;
    background-color: Aqua;
}

.controls
{
    width: 100%;
    height: 44px;
    background-color: Green;
}

.container
{
    width: 100%;
    height: 636px; /* 768 minus header, controls and footer */
    background-color: Blue;
    overflow: hidden;
}

.scroller
{
    width: 100%;
/*    height: 636px;*/
}

.trans
{
    /* transition */
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.nonselectable
{
    -webkit-user-select: none;
}

.pulldown
{
    width: 100%;
    height: 44px;
    background-color: Teal;
}

.items
{
    width: 100%;
}

.item
{
    width: 100%;
    background-color: Fuchsia;
    border-bottom: 1px solid #eee;
}

.item:nth-child(2n+0)
{
    background-color: #efefef;
}

.bodycontent
{
    width: 100%;
}

.pullup
{
    width: 100%;
    height: 44px;
    background-color: Teal;
}

.footer
{
    width: 100%;
    height: 44px;
    background-color: Red;
}


/* identifiers */

#page
{
    width: 1024px;
    height: 768px;
}

#nav
{
    width: 300px;
    height: 768px;
}

#navheader
{
}

#navcontrols
{
}

#navcontainer
{
}

#navscroller
{
}

#navpulldown
{
}

#navitems
{
}

.navitem
{
    height: 44px;
}

#navpullup
{
}

#navfooter
{
}

#viewport
{
    width: 724px;
    height: 100%; /* CHANGING THIS VALUE TO 724px BREAKS THE SLIDING PANEL */
    background-color: Purple;
    overflow: hidden;
}

#content
{
    position: relative;
    float: left;
    width: 1448px;
    height: 768px;
    background-color: Gray;
}

#list
{
    width: 724px;
    height: 768px;
}

#listheader
{
}

#listcontrols
{
}

#listcontainer
{
}

#listscroller
{
}

#listpulldown
{
}

#listitems
{
}

.listitem
{
    height: 88px;
}

#listpullup
{
}

#listfooter
{
}

#article
{
    width: 724px;
    height: 768px;
}

#articleheader
{
}

#articlecontrols
{
}

#articlecontainer
{
}

#articlescroller
{
}

#articlepulldown
{
}

#articlebody
{
}

#articlepullup
{
}

#articlefooter
{
}

Answer 1

不确定你的意思是休息，它根本不起作用，或者它不会像你想的那样一直走。

#page高度为768，因此目前您的#viewport高度（100％）也是768.

尝试使用768而不是724，看看会发生什么（如果它按您想要的方式工作）。

我知道这不能解决您的问题，但可能会更接近解决方案。

将高度100％更改为724px会产生影响

1 个答案: