|
Сообщение от valyan
|
|
header - должен быть всегда, footer - по клику по ссылке
|
так пойдёт?
<!doctype html>
<style>
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#header {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
background: red;
z-index: 100;
}
#content {
position: relative;
height: 100%;
border: solid 1px green;
padding-top: 1em;
padding-bottom: 1em;
}
#footer {
position: fixed;
left: 0px;
bottom: -2em;
width: 100%;
background: yellow;
}
</style>
<div id="header">header</div>
<div id="content">
<a href="#" class="sh">show/hide footer</a>
</div>
<div id="footer">footer</div>
<script>
(function () {
var content = document.getElementById("content");
for (var i = 1; i <= 100; i++) {
content.innerHTML += "<br/>" + i;
}
document.getElementsByClassName("sh")[0].onclick = function () {
var fs = document.getElementById("footer").style;
if (fs.bottom == "0em") {
fs.bottom = "-2em";
} else {
fs.bottom = "0em";
}
}
})();
</script>