body{
	font-family:?georgia,serif;
	background:?#ddd;
	font-weight:?400;
	font-size:?15px;
	color:?#333;
	overflow:?hidden;
	-webkit-font-smoothing:?antialiased;/*常用于英文字體*/
}
a{
	text-decoration:?none;
	color:?#555;
}
.clr{
	width:?0;
	height:?0;
	overflow:?hidden;
	clear:?both;
	padding:?0;
	margin:?0;
}
.st-container{
	width:?100%;
	height:?100%;
	position:?absolute;
	left:?0;
	top:?0;
	font-family:?"Josefin?Slab","Myriad?Pro",arial,sans-serif;
}
.st-container?>?input,
.st-container?>?a{
	width:?20%;
	height:?34px;
	line-height:?34px;
	position:?fixed;
	bottom:?0;
	cursor:?pointer;
}
.st-container?>?input{
	opacity:?0;
	z-index:?1000;
}
.st-container?>?a{
	z-index:?10;
	font-weight:?700;
	font-size:?16px;
	background:?#e23a6e;
	text-align:?center;
	color:?#fff;
	text-shadow:?1px?1px?1px?rgba(151,24,64,0.2);
}

#st-control-1,#st-control-1?+?a{
	left:?0%;
}
#st-control-2,#st-control-2?+?a{
	left:?20%;
}
#st-control-3,#st-control-3?+?a{
	left:?40%;
}
#st-control-4,#st-control-4?+?a{
	left:?60%;
}
#st-control-5,#st-control-5?+?a{
	left:?80%;
}

.st-container?input:checked?+?a,
.st-container?input:checked:hover?+?a{
	background:?#821134;
}

.st-container?input:checked?+?a:after{
	content:?"";
	width:?0;
	height:?0;
	overflow:?hidden;
	border:?20px?solid?transparent;
	border-bottom-color:#821134?;
	position:?absolute;
	bottom:?100%;
	left:?50%;
	margin-left:?-20px;
}
.st-container?input:hover?+??a{
	background:?#AD244F;
}

.st-scroll,
.st-panel{
	width:?100%;
	position:?relative;
	height:?100%;
	left:?0%;
	top:?0%;
}
.st-scroll{
	left:?0;
	top:0;
	-webkit-transform:?translate3d(0,0,0);/*在移動端建議用3D變換，因為它可以開啟手機硬件加速*/
	-moz-transform:?translate3d(0,0,0);
	-o-transform:?translate3d(0,0,0);
	-ms-transform:?translate3d(0,0,0);
	transform:?translate3d(0,0,0);
	-webkit-backface-visibility:?hidden;
}
.st-panel{
	background:?#fff;
	overflow:?hidden;
	
}
#st-control-1:checked?~?.st-scroll{
	transform:?translateY(0%);
}
#st-control-2:checked?~?.st-scroll{
	transform:?translateY(-100%);
}
#st-control-3:checked?~?.st-scroll{
	transform:?translateY(-200%);
}
#st-control-4:checked?~?.st-scroll{
	transform:?translateY(-300%);
}
#st-control-5:checked?~?.st-scroll{
	transform:?translateY(-400%);
}

1. position: relative;height: 100%;

2. position: absolute;left:0;top:0;width: 100%;height: 100%;

3. ....

4. 視頻用的第一種