3

こんにちは、ブラウザの高さいっぱいになるネストされた div を作成しようとしています。

私は swipe.js を使用して、3 つの全画面 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 は常に使用可能な水平方向のスペース全体を占めるように拡張されるため、何かをしない限り、幅プロパティを失いたい場合がありますdiv{display:inline;}。とにかく、垂直方向のスペースを取りたい場合は、height:100%; プロパティは必須です。

これを見てください：http://jsfiddle.net/TdDuz/14/（あなたはjavascriptで働いています）

より完全な例 jsfiddle.net/TdDuz/15

于 2012-10-03T03:45:56.623 に答える