Question

我正在使用Skrollr来处理我的ipad和桌面尺寸，但是由于我使网站响应，我关闭了Skrollr以便我的内容会堆叠。我似乎遇到麻烦的一件事是让我的内容容器（部分标签）调整大小到窗口的高度。它们默认回到那些标签内的任何内容的高度，甚至认为css给出了最小高度和100％的高度。我通过在javaScript中强制高度来实现这一点，但我认为我不应该这样做？

HTML

<section id='sectionOne' data-0="transform:translate(0%,0%);" data-100p="transform:translate(0%,-50%);"> <h1>SECTION 1</h1> </section>

<section id='sectionTwo' data-0="transform:translate(0%,100%);" data-200p="transform:translate(0%,0%);" data-300p="transform:translate(0%,-50%);"> <h1>SECTION 2</h1> </section>

CSS

html{
height: 100%;
width: 100%;

}

body{
background-color: black;
height: 100%;
width: 100%;

}

section{
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%;
border-top: black 1px solid;

}

#sectionOne{
height: 100%;
min-height: 100%;
width: 100%;
background-color:#00ff00;

}

#sectionOne{
height: 100%;
min-height: 100%;
width: 100%;
background-color:#ffb227;

}

的javascript：

var s;

// set breakpoitns
$(window).setBreakpoints({
    // use only largest available vs use all available
    distinct: true, 
    // array of widths in pixels where breakpoints
    breakpoints: [
        320,
        480,
        768  
    ] 
}); 

$(window).bind('enterBreakpoint320',function() {
    console.log("this is now 320");

    if(s != undefined)
    {
        console.log('destroy');
        s = skrollr.init().destroy();
    }
    console.log(s);
});

$(window).bind('enterBreakpoint480',function() {
    console.log("this is now 480");

    if(s != undefined)
    {
        console.log('destroy');
        s = skrollr.init().destroy();
    }
    // force the sections to be the hight of the view port
    $('#sectionOne').height($(window).height());
    $('#sectionTwo').height($(window).height());
    console.log(s);
});

$(window).bind('enterBreakpoint768',function() {
    console.log("this is now 768");
    s = skrollr.init({
            forceHeight: true
        });
    console.log(s);

});

关闭skrollr时CSS高度无响应

0 个答案: