我试图将一个大容器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>

09-25 20:05