文章/答案/技术大牛

发布

社区首页 >问答首页 >将高度100%更改为724px会有所不同

问将高度100%更改为724px会有所不同
EN

Stack Overflow用户

提问于 2011-11-13 05:34:34

回答 1查看 461关注 0票数 1

我有一个网页应用的布局，并一直在试图弄清楚为什么iScroll-4 (http://cubiq.org/iscroll-4)似乎与JQuery动画功能冲突。然而，事实证明并非如此，问题在于包含DIV的CSS高度值。

我的超文本标记语言和CSS遵循一个横向，iPad设置应用程序风格的web应用程序。右侧面板应该在5秒后向左滑动，但将视口DIV样式更改为height:724px会破坏这一点。

我想知道有没有人能告诉我为什么更改样式表中的注释行会有所不同？

下面的超文本标记语言引用了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
{
}

jquery

css

html

scroll

回答 1

Stack Overflow用户

发布于 2011-11-21 06:25:58

不确定你所说的中断是什么意思，它是完全不起作用，还是没有像你所希望的那样进行。

#page的高度是768，因此您当前的#viewport高度( 100%)也是768。

试着用768代替724，看看会发生什么(如果它以你想要的方式工作)。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8107714

复制

相似问题

问将高度100%更改为724px会有所不同
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将高度100%更改为724px会有所不同EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将高度100%更改为724px会有所不同
EN