Van hoogte veranderen 100% naar 724px maakt een verschil

Ik heb een lay-out voor een web-app en heb geprobeerd uit te zoeken waarom iScroll-4 (http://cubiq.org/iscroll-4) in strijd lijkt te zijn met de JQuery-animatiefunctie. Blijkt echter dat dit niet het geval is. Het probleem is de CSS-hoogtewaarde van een bevattende DIV.

Mijn HTML en CSS volgen voor een liggend, iPad-instellingen App-stijl webapp. Het rechterpaneel zou na 5 seconden naar links moeten schuiven, maar de DIV-stijl van de viewport moet de hoogte hebben: 724 px breekt dit.

Ik vraag me af of iemand me kan vertellen waarom het veranderen van de regel met commentaar in de stylesheet een verschil maakt, alsjeblieft?

De volgende HTML-verwijzingen versie 1.7 van jQuery en versie 4 van iScroll.

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
Bedankt jongens, maar dit is zeker geen voltooide code, vandaar de enorme ruimtes. Iedereen kent een oplossing voor de vraag?
toegevoegd de auteur Matt W, de bron
Eigenlijk zelfs drievoudig in termen van selectors. body, div, ul {margin: 0; opvulling: 0; border: 0} div, ul {position: relative; float: left;} ul {list-style-type: none} ruimt het op. ;-)
toegevoegd de auteur Greg Pettit, de bron
FYI marge: 0px 0px 0px 0px; is dubbel overbodig. Gebruik marge: 0;
toegevoegd de auteur AlienWebguy, de bron
Het kan iets zijn met iScroll omdat het prima lijkt te werken zonder het, ook als je #viewport {overflow: visible} instelt, werkt het om de een of andere reden goed, dat kan je een voorsprong geven. jsfiddle.net/Vervious/C3b8j/4
toegevoegd de auteur Vervious, de bron

1 antwoord

Weet je niet zeker wat je bedoelt met pauze, werkt het dan helemaal niet of gaat het helemaal niet zoals je zou willen.

De #page-hoogte is 768, daarom is uw #viewport-hoogte (bij 100%) momenteel ook 768.

Probeer 768 in plaats van 724 te plaatsen en kijk wat er gebeurt (als het werkt zoals u het wilt).

Ik weet dat dit je vraag niet oplost, maar het kan dichter bij een oplossing komen.

0
toegevoegd
Sorry, wat ik bedoel met pauze is dat in de meeste browsers het naar binnen glijden van de rechterhand div niet beweegt, hoewel het zeker gebeurt in de DOM, omdat het resultaat van het verplaatste element kan worden gezien bij het doen van dingen zoals scrollen. - dat wil zeggen: het gebeurt. Als het element er niet overheen was geschoven, zou het helemaal niet zichtbaar zijn.
toegevoegd de auteur Matt W, de bron
Oh, trouwens, ik heb het met verschillende hoogten geprobeerd. Het lijkt erop dat het gebruik van px versus% is.
toegevoegd de auteur Matt W, de bron
Bewerkt je antwoord om consistent 768 te zeggen (je hebt 786 op één plek)
toegevoegd de auteur Blair McMillan, de bron