3

您好我正在尝试创建一个嵌套的 div，它将具有浏览器的完整高度。

我正在使用 swipe.js，以便能够在三个全屏 div 之间滑动。如果我定义了“介绍”div的高度，我可以让它工作，但是因为我希望它在不同的屏幕尺寸之间工作，我希望用 min-height 等来做到这一点。

html {
    /* height: 100%; */
}

body {
    /* height: 100%; */
}

#wrapper {
    margin: 0 auto;
    min-width: 320px;
    max-width: 1200px;
    /* min-height: 100%; */
    /* height: auto !important; */
    /* height: 100%; */
}

.swipe div {
    margin:0 0px;
    padding:0px 0px;
}

#intro {
    min-height: 100%;
    height: auto !important;
    height: 100%;

    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

和html：

<body>

<div id="wrapper">

    <div id='slider' class='swipe'>

    <div>
            <div id="intro" style='display:block; background: url(images/background.jpg) no-repeat center center fixed;'>
            </div>

            <div id="intro2" style='display:none'>2</div>

            <div id="intro3" style='display:none'>3</div>

        </div>

    </div><!-- #slider -->

</div><!-- #wrapper -->

<script src='swipe.js'></script>
<script>var slider = new Swipe(document.getElementById('slider'));
</script>
</body>

任何帮助或建议将不胜感激

4

2 回答 2

2

看看这是否是您要实现的目标：

body {
   height: 100%;
    width:100%;
}

#wrapper {
    position:absolute;
    margin: 0 auto;
    min-width: 320px;
    max-width: 1200px;
    /* min-height: 100%; */
    /* height: auto !important; */
    height: 100%;
        width:100%;
}

.swipe{
    position:relative;
    height:100%;
    width:100%;
    margin:0 0px;
    padding:0px 0px;
    background-color:red;
}

#intro {
}

jsfiddle

于 2012-10-03T04:15:33.413 回答
1

按照@grc 的建议做。

html, body, #wrapper, #slider, #slider, div { /*You may not want to set this to 'div'*/
    margin:0;
    padding:0;
    border:0;
    width:100%;
    height:100%;
}

#wrapper {
    height:100%;
    /*margin: 0 auto;
    min-width: 320px;
    max-width: 1200px;*/ <----- LOSE THIS. This adds nothing to your needs and won't work on IE6 if you want backwards compatibility.
}

重要的部分不是为您想要的元素设置 max-width|height，div 将始终扩展以占用整个可用的水平空间，因此您可能希望丢失 width 属性，除非您执行类似div{display:inline;}或类似的操作。无论如何，如果你想占用垂直空间，height:100%; 财产是必须的。

看看这个： http: //jsfiddle.net/TdDuz/14/（你在javascript中工作）

一个更完整的例子 jsfiddle.net/TdDuz/15

于 2012-10-03T03:45:56.623 回答