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

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
{
}
1
ありがとうございます、しかしこれは間違いなく完成したコードなので、大規模なスペースです。誰でもその問題の解決策を知っていますか?
追加された 著者 Matt W,
セレクタの点でも実際には三重冗長です。 body、div、ul {margin:0;パディング:0; border:0} div、ul {position:relative; float:left;} ul {list-style-type:none} はそれをクリーンアップします。 ;-)
追加された 著者 Greg Pettit,
FYI margin:0px 0px 0px 0px; は2重に重複しています。 margin:0;
追加された 著者 AlienWebguy,
あなたが#viewport {overflow:visible}を設定した場合、何らかの理由でうまく動作し、それがあなたをリードするかもしれません。 jsfiddle.net/Vervious/C3b8j/4
追加された 著者 Vervious,

1 答え

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

#pageの高さは768です。したがって、#viewportの高さ(100%)も768です。

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

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

0
追加された
申し訳ありませんが、私が休憩をとっているのは、ほとんどのブラウザでは、右のdivのスライドインがアニメーション化されないことです。移動された要素の結果は、コンテンツをスクロールするすなわち、それは起こる。要素がスライドしていない場合、要素はまったく表示されません。
追加された 著者 Matt W,
ああ、私は別の高さで試しました。問題はpxと%の使用であると思われます。
追加された 著者 Matt W,
あなたの答えを一貫して768と言うように編集しました(あなたは1つの場所で786を持っています)
追加された 著者 Blair McMillan,