Сторінки веб-сторінок переміщуються, коли змінюється розмір браузера - html, css, layout

У мене є основний макет веб-сайту на одній сторінці, але якщоЯ перебуваю на "сторінці", яка не перша, і розмір браузера змінено, сторінка переміститься вгору на 300 пікселів або близько того. Те саме відбувається, якщо я розгорну браузер. Я думав, що це може бути весь вміст, який рухав сторінку, але я все видалив, і це все ще робить. Чи існує можливість, щоб сторінка залишалася там, де вона є, поки користувач не прокрутить сторінку, навіть коли розмір браузера буде змінено?

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;
}

Відповіді:

Я не думаю, що у вас є проблеми з вашим кодом - "300px-випуск" не буде присутній, коли відвідувач відвідує сторінку та натискає меню.

Коли ви змінюєте розмір браузера «вручну», це не відображає того, як відвідувач бачить сторінку.

В якості тесту натисніть на меню, щоб показатиприклад "../test.html#two" - скопіюйте адресу - відкрийте нову вкладку та змініть розмір вікна браузера до будь-якого розміру - вставте адресу в нову вкладку: "300px-випуск" там не буде і лише шоу # два на 100% висоті.

Якщо ви хочете, щоб веб-сайт міг динамічно змінюватися при зміні розміру області перегляду браузера вручну, вам слід перейти до запитів CSS мультимедіа.