高さを100％から724pxに変更すると違いが生じます

コメントする / それ / By

Webアプリケーション用のレイアウトがあり、iScroll-4（http://cubiq.org/iscroll-4）がJQueryのアニメーション機能と矛盾するように見える理由を解明しようとしています。しかし、それはそうではないことが分かります。問題は、DIVを含むCSSの高さの値です。

私のHTMLとCSSは、横向き、iPadの設定Appスタイルの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>
                    
                    <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>
  • page.content.list.listcontainer.listscroller.listitems.listitem.1
  • page.content.list.listcontainer.listscroller.listitems.listitem.2
  • page.content.list.listcontainer.listscroller.listitems.listitem.3
  • page.content.list.listcontainer.listscroller.listitems.listitem.4
  • page.content.list.listcontainer.listscroller.listitems.listitem.5
  • page.content.list.listcontainer.listscroller.listitems.listitem.6
  • page.content.list.listcontainer.listscroller.listitems.listitem.7
  • page.content.list.listcontainer.listscroller.listitems.listitem.8
  • page.content.list.listcontainer.listscroller.listitems.listitem.9
  • page.content.list.listcontainer.listscroller.listitems.listitem.10
  • page.content.list.listcontainer.listscroller.listitems.listitem.11
  • page.content.list.listcontainer.listscroller.listitems.listitem.12
  • page.content.list.listcontainer.listscroller.listitems.listitem.13
  • page.content.list.listcontainer.listscroller.listitems.listitem.14 
                            <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
{
}
ベストアンサー

あなたが休憩で何を意味するかわからない、それはまったく動作しないのか、それともあなたが望むように全然行っていないのでしょうか。

#pageの高さは768です。したがって、#viewportの高さ（100％）も768です。

724の代わりに768を入れて、何が起こるかを見てみましょう。

私はこれがあなたの質問を解決しないことを知っていますが、解決策に近づくかもしれません。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です