div altezza verticale entro la risoluzione

**djjunior** · 15-02-2022, 23:04

Salve ho un div verticale fisso:

codice:

#box1 {
 position: fixed;
 width: 20em;
 top: 0;
 z-index: 6;
 height: 100%;
}

all'interno di questo div vorrei inserire un altro:

codice:

#box2 {
 position: relative;
 top: 275px;  
 height: 100%;
 overflow: auto;
}

facendo così mi sposta tutto il div, cioè l'altezza esce fuori dalla pagina invece di rientrare nella prima div box1 e cioè alla fine della pagina che si visualizza in base alla risoluzione.
Io vorrei che l'altezza del BOX2 termini alla fine della pagina e si adatti, se necessario usare la barra di spostamento come indicato.
Come posso ovviare?
GRazie

**djjunior** · 16-02-2022, 15:55

ho cercato di semplifarlo, usando solo una div:

codice:

#menu {
  position: fixed;
  margin-top: 250px;
  height: 100%;
  overflow: auto;
  width: 20em;
}

Ma resta il fatto che l'height non si ferma a fine pagina e quindi far apparire la barra di spostamento se necessaria, ma continua fuori la pagina, sicuramente dovuto al: margin-top: 250px, ma a me serve che si posizioni a 250px dal top ma che comunque l'height si fermi a fine pagina, in base alla risoluzione del pc, altrimenti avrei impostato l'height: 400px è avrei risolto.
Grazie per l'aiuto

**KillerWorm** · 16-02-2022, 17:06

Prova a togliere margin-top e al posto di questo usa top:250px e bottom:0

**djjunior** · 16-02-2022, 17:11

grazie killerworm, provato ma nulla

**djjunior** · 16-02-2022, 18:44

ecco una pagina text:

codice:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body {
  height: 100%;
  margin: 0;
}

.full-height {
 position: fixed;
  top: 250px;
  height: 100%;
  overflow: auto;
  bottom: 0;
  width: 20em;
  border: 2px solid black;
}
</style>

</head>
<body>

<div class="full-height">prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br>prova<br></div>

</body>
</html>

ho messo un border per capire come si vede, infatti il rettangolo non ha chiusura sotto, infatti il testo sarebbe + lungo ma non fa visionare la barra di spostamento perchè esce fuori proprio dalla pagina

**KillerWorm** · 16-02-2022, 21:28

rimuovi height: 100%;

**djjunior** · 18-02-2022, 17:45

Perfect, grazie

Discussione: div altezza verticale entro la risoluzione

Strumenti discussione

Ricerca discussione

Visualizza

div altezza verticale entro la risoluzione

Permessi di invio