Question

我在711像素宽的范围内查看内容时保持固定在页面顶部：

Click here to see the content fixed to the top of the page.

...但是当我将浏览器的宽度缩小到397px宽时，内容会按比例缩放到页面中心：

Click here to see the content move to the center of the page as it scales proportionally.

我如何保持我的内容在页面顶部，同时继续按比例缩放？

以下是我用来格式化HTML的代码：

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Swiffy Output</title>
  <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.4/runtime.js"></script>
  <script>
    swiffyobject = {
        "as3": true,
        "frameRate": 24,
        "frameCount": 109,
        "backgroundColor": -1,
        "frameSize": {
          "ymin": 0,
          "xmin": 0,
          "ymax": 14000,
          "xmax": 20000
        },
        "fileSize": 146782,
        "v": "7.4.1"
  </script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body style="margin: 0; overflow: hidden;">
  <div id="swiffycontainer" style="width: 100%; height: 100%">

  </div>
  <script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
      swiffyobject, {});

    stage.start();
  </script>
</body>

</html>

＆＃13;

Answer 1

将此添加到您的CSS：

#swiffycontainer {
  position: fixed;
  top: 0;
  left: 0;
}

以下是JsFiddle

的示例

无论您在视口中的哪个位置滚动，都可以看到红色块固定在容器的顶部。

Answer 2

html, body, #swiffycontainer {margin-top: 0; padding-top:0;}

说明：我会添加此css以防止浏览器预定义的值，浏览器在未定义的情况下使用这些值（如在Chrome等中使用margin-top：8px）。

将内容修复到页面顶部

2 个答案: