当以 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 的代码:
<!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>最佳答案
将此添加到您的 CSS 中:
#swiffycontainer {
position: fixed;
top: 0;
left: 0;
}
这是一个例子 JsFiddle
无论您在视口(viewport)中滚动到哪里，您都可以看到红色 block 固定在容器的顶部。
关于html - 将内容固定到页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36141381/