Question

我有一个基本的单页网站布局，但如果我在一个页面上＆＃39;这不是第一个，浏览器调整大小，页面将向上移动300px左右。如果我最大化浏览器会发生同样的事情。我认为这可能是移动页面的所有内容，但我已经删除了所有内容，而且它仍在执行此操作。有没有办法使页面保持原样，直到用户滚动，即使浏览器调整大小？

HTML：

<div id="nav">
    <ul>
        <li><a href="#one">one</a></li>
        <li><a href="#two">two</a></li>
        <li><a href="#three">three</a></li>
        <li><a href="#four">four</a></li>
    </ul>
</div>

<div id="one"><p>section one</p></div>
<div id="two"><p>section two</p></div>
<div id="three"><p>section three</p></div>
<div id="four"><p>section four</p></div>

的CSS：

* {
margin: 0px;
padding: 0px;
}

html, body {
height: 100%;
margin: auto;
}

#one, #two, #three, #four {
min-height: 100%;
margin: auto;
}

#one {
background-color: #916e80;
}

#two {
background-color: #ffc3a0;
}

#three {
background-color: #a3e0c9;
}

#four {
background-color: #b0b3b6;
}

#nav  {
position: fixed;
right: 0px;
z-index: 100;
}

Answer 1

我不认为您的代码存在问题 - 当访问者访问该网页并点击菜单时，“300px-issue”将不会出现。

当您“手动”调整浏览器大小时，它不会反映访问者看到该页面的方式。

作为测试，单击菜单以显示例如“../test.html#two” - 复制地址 - 打开新选项卡并将浏览器窗口调整为任意大小 - 将地址粘贴到新的选项卡：“300px-issue”不会出现，只显示#two的100％高度。

如果您希望网站在手动调整浏览器视口大小时能够动态更改，则应该进行CSS媒体查询。

调整浏览器大小时会移动一页网页页面

1 个答案: