Question

您好我正在尝试创建一个具有浏览器全高的嵌套div。

我正在使用swipe.js，以便能够在三个全屏div之间滑动。如果我定义'介绍'div的高度，我可以让这个工作，但我希望这可以在不同的屏幕尺寸之间工作，我希望用最小高度等来做这个。

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>

非常感谢任何帮助或建议

Answer 1

看看你是否想要实现这个目标：

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

Answer 2

按照@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属性，除非你做{{{{{ 1}}或类似的东西。无论如何，如果你想采取垂直空间，高度：100％;属性是必须的。

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

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

创建一个全屏div

2 个答案: