我在调整桌面窗口的大小时遇到了一个问题。在开发人员工具中进行测试似乎效果很好，但是一旦在不同的浏览器中进行测试，响应性就会与页脚位置混淆。让它在其他地方滚动。如果你能告诉我哪里做错了我会很感激的?
示例网站在这里:https://rrrhhhhhhhhh.github.io/dsn/这里的代码:https://github.com/rrrhhhhhhhhh/dsn
HTML:
<body>
<div id="content">
<section class="helvetica">
<div class="image-wrapper logo">
<img src="./resources/images/dsn-designs.png">
</div>
<div class="image-wrapper">
<img src="./resources/images/dsn.jpg">
</div>
</section>
<section class="helvetica">
<p><h2>Welcome.</h2></p>
</section>
<footer>
<section class="bottom">
<p><a href="mailto:hello@duncan-newby.co.nz" class="push link-green" target="_blank">hello@duncan-newby.co.nz</a></p>
</section>
</div>
</footer>
CSS:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
letter-spacing: 0.08em;
line-height: 1.3em;
background: #9fab9d;
color: white;
position: relative;
}
#content {
margin: calc(2vw + 20px);
}
section {
margin-bottom: 2em;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: ;
color: white;
text-align: left;
}
section.bottom {
margin-left: calc(2vw + 20px);
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
如果你给position: relative;作为页脚，它将被放置在底部，只有当用户到达页面底部时才可见。
另一种选择是position: sticky;。在这种情况下，页脚将始终在浏览器窗口的底部，主要是在其他内容的顶部。如果你一直滚动到底部，页脚就会在页面的底部，在页脚和其他内容之间有一个间隙。