Le pagine del sito Web di una sola pagina si spostano quando il browser viene ridimensionato: html, css, layout

Ho un layout di base del sito Web di una pagina, ma seSono su una "pagina" che non è la prima e il browser viene ridimensionato, la pagina salirà di circa 300 px. La stessa cosa succede se massimizzo il browser. Ho pensato che potrebbe essere stato tutto il contenuto a spostare la pagina, ma ho rimosso tutto e lo sta ancora facendo. C'è un modo per la pagina di rimanere dove si trova fino a quando l'utente scorre anche quando il browser viene ridimensionato?

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

risposte:

Non credo che ci sia un problema con il tuo codice: il "problema di 300px" non sarà presente quando un visitatore visita la pagina e fa clic sul menu.

Quando ridimensioni il browser "manualmente", non riflette il modo in cui un visitatore vede la pagina.

Come test, fai clic sul menu per mostrareesempio "../test.html#two" - copia l'indirizzo - apri una nuova scheda e ridimensiona la finestra del browser a qualsiasi dimensione - incolla l'indirizzo nella nuova scheda: il "problema 300px" non ci sarà e solo mostra # due in altezza al 100%.

Se vuoi che il sito web sia in grado di cambiare dinamicamente quando ridimensioni manualmente il viewport del browser, dovresti cercare i mediaquiries CSS.