我试图将一个大容器div放置在浏览器底部上方60像素处,以便为视频流和静止图像腾出空间,这与此处的this解决方案非常相似。
与普通的粘性/固定类型页脚不同,该容器在访问页面和随后调整浏览器大小时会保留在原处-但可以向上滚动以供希望浏览网站内容的用户使用。
查看示例站点,可以看到CSS属性“ top”在浏览器调整大小时发生了变化,但是我找不到实现此目的的机制。
我应该如何实现这种弹性?
提前非常感谢您!
最佳答案
您可以使用Javascript来实现此目的
setTop = function(e) {
document.getElementById('content').style.marginTop = window.innerHeight - 60;
};
window.onresize = setTop;
完整的工作示例:
<html>
<head>
<title>My Page</title>
<style type="text/css" media="screen">
#content {
width: 80%;
margin: 0 auto;
border: 1px solid black;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
Here is the content...
</div>
<script type="text/javascript" charset="utf-8">
setTop = function(e) {
document.getElementById('content').style.marginTop = window.innerHeight - 60;
};
setTop();
window.onresize = setTop;
</script>
</body>
</html>