Creare DIV elastici

**Bartjsp** · 04-01-2019, 18:07

Ho realizzato tre div su tre righe ma sto avendo molti problemi e di tutti gli esempi trovati sulle guide html.it, in off-line non ne funziona nessuno.

L'header middle esce ben oltre il div container, la scritta "testo2" di 400px mi aggiunge sopra e sotto la scritta moltissimo spazio ed aumenta all'aumentare della dimensione del testo.

codice:

#container {
    height: 100%;
}
#header {
    height: 100px;
    font-size: 45px;
    text-align: right;
}
#middle {
    height: 100%;
    font-size: 400px;
    text-align: center;
}
#footer {
    height: 200px;
    text-align: center;
}

codice:

<div id="container">
 <div id="header">testo1</div>
 <div id="middle">testo<br />2</div>
 <div id="footer">immagine.jpg</div>
</div>

**m4rko80** · 04-01-2019, 19:02

Ciao, ci sono delle regole sbagliate. Gurda qusto un po' modificato:

codice:

<html>
<head>
<style>


#container {
   max-width: 1024px;
   margin: auto;
   background-color: pink
}
#header {
    min-height:100px;
    font-size: 45px;
    text-align: right;
	background-color: orange
}
#middle {    
    font-size: 400px;
    text-align: center;
	background-color: yellow
}
#footer {
    height: 200px;
    text-align: center;
	background-color: green;
}
</style>
</head>
<body>
<div id="container">
 <div id="header">testo1</div>
 <div id="middle">testo<br />2</div>
 <div id="footer">immagine.jpg</div>
</div>
</body>
</html>

Intanto, la property height 100% non è applicabile, non funziona come la width. Se vuoi far si che sia adattabile/fluida al massimo cosi' come vedi, puoi dare un min-height se ti aspetti un minimo di altezza e far si che si adatti/aumenti se fosse il caso in base al contenuto.
Se forzi un altezza con i px e il contenuto va oltre per via del font-size o contenuto di diverso tipo avrai l'effetto indesiderato.
Ho messo un background-color solo per distinguere meglio i contenitori con le modifiche.
Ora se provi la pagina con simulaore responsive vedrai che il testo centrate ad un certo punto forza la larghezza perchè non e' settato dinamicamente.
Per gestire dimensioni in base al formato device, si possono usare in alcuni casi le percentuali oppure regole ad hoc tipo le media query per definire le varie regole:

https://hackernoon.com/4-techniques-...s-f663791c62f0

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

**Bartjsp** · 04-01-2019, 19:31

Ti ringrazio adesso mi è tutto più chiaro, vedrò di trovare una soluzione alternativa. Per il testo invece mi sembra di capire che non si possa fare molto, non c'è modo di diminuire l'interlinea tra un rigo e l'altro.

Discussione: Creare DIV elastici

Strumenti discussione

Ricerca discussione

Visualizza

Creare DIV elastici

Permessi di invio