页面高度只有设置为100vh才会出现满屏；100%无效； translateY 也无法实现滑动

结构是完全按照视频的脚本写的  

.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>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>

 </section>

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

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

  <h2>ClassB</h2>

  <p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>

 </section>

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

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

  <h2>ClassC</h2>

  <p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>

 </section>

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

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

  <h2>ClassD</h2>

  <p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>

 </section>

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

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

  <h2>ClassE</h2>

  <p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>

 </section>

 </div> 

</div>