0

我试图在浏览器底部上方放置一个 60 像素的大型容器 div ，以便为视频流和静止图像腾出空间，与这里的解决方案非常相似。

与常见的粘性/固定类型页脚不同，容器在访问页面和随后的浏览器调整大小时保持在其位置 - 但可以向上滚动以供想要浏览网站内容的用户使用。

查看示例站点，我可以看到 CSS 属性“top”在浏览器调整大小时发生变化，但我找不到完成此操作的机制。

我应该如何实现这种弹性？

非常感谢您！

4

1 回答 1

2

您可以按照以下方式使用 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>
于 2012-07-07T11:14:03.537 回答