頁面高度只有設(shè)置為100vh才會出現(xiàn)滿屏；100%無效； translateY 也無法實現(xiàn)滑動

結(jié)構(gòu)是完全按照視頻的腳本寫的 ?

.st-scroll,.st-panel{

width:100vw;

height:100vh;

position:relative;

}

.st-scroll{

top:0;

left:0;

-webkit-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

-webkit-backface-visibility:hidden;

-webkit-transition:all 0.6s ease-in-out;

-mos-transition:all 0.6s ease-in-out;

-ms-transition:all 0.6s ease-in-out;

-o-transition:all 0.6s ease-in-out;

-transition:all 0.6s ease-in-out;

}

.st-panel{

background:#fff;

overflow:hidden;

}

#st-control-1:checked ~ .st-scroll{

-webkit-transform:translateY(0%);

-moz-transform:translateY(0%);

-ms-transform:translateY(0%);

-o-transform:translateY(0%);

transform:translateY(0%);

}

#st-control-2:checked ~ .st-scroll{

-webkit-transform:translateY(-100%);

-moz-transform:translateY(-100%);

-ms-transform:translateY(-100%);

-o-transform:translateY(-100%);

transform:translateY(-100%);

}

#st-control-3:checked ~ .st-scroll{

-webkit-transform:translateY(-200%);

-moz-transform:translateY(-200%);

-ms-transform:translateY(-200%);

-o-transform:translateY(-200%);

transform:translateY(-200%);

}

#st-control-4:checked ~ st-scroll{

-webkit-transform:translateY(-300%);

-moz-transform:translateY(-300%);

-ms-transform:translateY(-300%);

-o-transform:translateY(-300%);

transform:translateY(-300%);

}

#st-control-5:checked ~ .st-scroll{

-webkit-transform:translateY(-400%);

-moz-transform:translateY(-400%);

-ms-transform:translateY(-400%);

-o-transform:translateY(-400%);

transform:translateY(-400%);

}

<div class="container">

?<div class="st-container">

? <input type="radio" name="radio-set" checked="checked" id="st-control-1">

? <a href="#st-panel-1">classA</a>

? <input type="radio" name="radio-set" checked="checked" id="st-control-2">

? <a href="#st-panel-1">classB</a>

? <input type="radio" name="radio-set" checked="checked" id="st-control-3">

? <a href="#st-panel-1">classC</a>

? <input type="radio" name="radio-set" checked="checked" id="st-control-4">

? <a href="#st-panel-1">classD</a>

? <input type="radio" name="radio-set" checked="checked" id="st-control-5">

? <a href="#st-panel-1">classE</a> ?

?</div>

?

?<div class="st-scroll">

?<section class="st-panel" id="st-panel-1">

? <div class="st-dese" data-icon="A"></div>

? <h2>ClassA</h2>

? <p>盡管在大多數(shù)情況下，沒有必要使用 transparent。不過如果您不希望某元素?fù)碛斜尘吧?，同時又不希望用戶對瀏覽器的顏色設(shè)置影響到您的設(shè)計，那么設(shè)置 transparent 值還是有必要的。</p>

?</section>

?<section class="st-panel" id="st-panel-2">

? <div class="st-dese" data-icon="B"></div>

? <h2>ClassB</h2>

? <p>盡管在大多數(shù)情況下，沒有必要使用 transparent。不過如果您不希望某元素?fù)碛斜尘吧?，同時又不希望用戶對瀏覽器的顏色設(shè)置影響到您的設(shè)計，那么設(shè)置 transparent 值還是有必要的。</p>

?</section>

?<section class="st-panel" id="st-panel-3">

? <div class="st-dese" data-icon="C"></div>

? <h2>ClassC</h2>

? <p>盡管在大多數(shù)情況下，沒有必要使用 transparent。不過如果您不希望某元素?fù)碛斜尘吧瑫r又不希望用戶對瀏覽器的顏色設(shè)置影響到您的設(shè)計，那么設(shè)置 transparent 值還是有必要的。</p>

?</section>

?<section class="st-panel" id="st-panel-4">

? <div class="st-dese" data-icon="D"></div>

? <h2>ClassD</h2>

? <p>盡管在大多數(shù)情況下，沒有必要使用 transparent。不過如果您不希望某元素?fù)碛斜尘吧瑫r又不希望用戶對瀏覽器的顏色設(shè)置影響到您的設(shè)計，那么設(shè)置 transparent 值還是有必要的。</p>

?</section>

?<section class="st-panel" id="st-panel-5">

? <div class="st-dese" data-icon="E"></div>

? <h2>ClassE</h2>

? <p>盡管在大多數(shù)情況下，沒有必要使用 transparent。不過如果您不希望某元素?fù)碛斜尘吧?，同時又不希望用戶對瀏覽器的顏色設(shè)置影響到您的設(shè)計，那么設(shè)置 transparent 值還是有必要的。</p>

?</section>

?</div>?

</div>