footer slide up - footer 바닥에 고정 방법
본문
답변 2
<style>
*{ margin: 0; padding: 0; }
#footer {
bottom: 0;
position: fixed;
z-index:999;
width:100%;
height:200px;
background-color:#3498db;
display: none;
animation: slideUp 1s;
-webkit-animation: slideUp 1s;
overflow: hidden;
}
#footer ul { width:90%; margin:25px auto; }
#footer ul li {
margin-right: 5%;
list-style: none;
width: 45%;
float: left;
text-align: justify;
color: rgba(0, 0, 0, .7);
}
#footer ul li p { font-size: 13px; }
.last-child{margin-right: 0;}
.btn {
width: 30px;
height: 30px;
bottom: 200px;
right: 10px;
position: fixed;
display: block;
background: #2c3e50;
border-radius: 5px 5px 0 0;
z-index: 9999;
color: white;
line-height: 30px;
text-align: center;
text-decoration: none;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.btn:hover {background: #34495e;}
.btn:before {
content: "+";
}
.btn-read {
float: right;
margin-top: 10px;
padding: 2px 10px;
right: 10px;
z-index: 9999;
background: #2ecc71;
border-radius: 5px;
box-shadow:inset 0 -2px 0 rgba(0, 0, 0, .2);
border: 1px solid rgba(0, 0, 0, .25);
color: rgba(255, 255, 255, .9);
line-height: 30px;
text-align: center;
text-decoration: none;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 14px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Show Footer */
input[type=checkbox]:checked ~ #footer {
display: block;
}
/* Change Icon */
input[type=checkbox]:checked ~ .btn:before {
content: "x";
}
/* Slide Button */
input[type=checkbox]:not(:checked) ~ .btn {
bottom: 0px;
-webkit-animation: slideUpBtn 1s;
}
/* Hack Checkbox */
.toogle-hide {
position: absolute;
top: -9999px;
left: -9999px;
visibility: hidden;
}
/* Animate Footer and Button */
@-webkit-keyframes slideUpBtn {
from {bottom: 200px;}
to {bottom: 0px;}
}
@-webkit-keyframes slideUp {
from {bottom: -200px;}
to {bottom: 0px;}
}
#lorem-bg {width:500px;text-align:justify; margin:100px auto;}
</style>
제가 수정을 해 보았는데 익스11에서는 정상적으로 작동합니다. 다른것으로는 확인 안 해 봐서 정확히 되는지는 모르겠습니다.
많은 도움이 되었습니다. 감사합니다.