color - css tag with class




Altezza CSS 100% con padding/margine (9)

Questo mi ha fatto impazzire per un paio di giorni, ma in realtà è un problema che ho colpito di tanto in tanto negli ultimi anni: con HTML / CSS come posso creare un elemento che ha una larghezza e / o altezza che è al 100% del suo elemento genitore e ha ancora padding o margini adeguati?

Con "corretto" intendo che se il mio elemento genitore è alto 200px e specificando height = 100% con padding = 5px mi aspetterei di ottenere un elemento 190px high con border = 5px su tutti i lati, ben centrato nell'elemento padre .

Ora, so che non è così che il modello standard della scatola specifica che dovrebbe funzionare (anche se mi piacerebbe sapere perché, esattamente ...), quindi la risposta ovvia non funziona:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Ma mi sembra che ci debba essere QUALCUN MODO di produrre in modo affidabile questo effetto per un genitore di dimensioni arbitrarie. Qualcuno sa di un modo per realizzare questo compito (apparentemente semplice)?

Oh, e per la cronaca non mi interessa molto la compatibilità con IE, quindi dovrebbe (si spera) rendere le cose un po 'più semplici.

EDIT: Poiché è stato chiesto un esempio, ecco il più semplice che posso pensare:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

La sfida è quindi quella di far apparire la scatola nera con una imbottitura di 25 pixel su tutti i bordi senza che la pagina cresca abbastanza grande da richiedere barre di scorrimento.


Bordo attorno a div, piuttosto che margine della pagina

Un'altra soluzione: volevo solo un semplice bordo attorno al bordo della pagina e volevo un'altezza del 100% quando il contenuto era più piccolo di quello.

Border-box non funzionava, e il posizionamento fisso sembrava sbagliato per una necessità così semplice.

Ho finito per aggiungere un bordo al mio contenitore, invece di fare affidamento sul margine del corpo della pagina - sembra che questo:

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

È il 2018 ora, la nuova merda dovrebbe essere menzionata qui perché la domanda continua a comparire su Google.

Una soluzione con flexbox (lavorando su IE11): ( o vista su jsfiddle )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

(Il CSS-reset non è necessariamente importante per il problema reale.)

La parte importante è flex: 1 (in combinazione con display: flex al genitore). Stranamente, la spiegazione più plausibile che conosco per come funziona la proprietà di Flex proviene da una documentazione nativa, quindi mi riferisco comunque .


Ho imparato come fare questo genere di cose leggendo " PRO HTML e CSS Design Patterns ". Il display:block è il valore di visualizzazione predefinito per il div , ma mi piace renderlo esplicito. Il contenitore deve essere del tipo giusto; position attributo position è fixed , relative o absolute .

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>

Fiddle dal comment di Nooshu


Il modo migliore è con la proprietà calc (). Quindi il tuo caso sarebbe simile a:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Semplice, pulito, senza soluzioni alternative. Assicurati di non dimenticare lo spazio tra i valori e l'operatore (es. (100% -5px) che interromperà la sintassi.


La soluzione è NON usare altezza e larghezza! Attacca la scatola interna usando in alto, a sinistra, a destra, in basso e quindi aggiungi margine.

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>


Questa è una delle più grandi idiozie dei CSS - Devo ancora capire il ragionamento (se qualcuno lo sa, pls. Spiega).

100% significa 100% dell'altezza del contenitore - a cui vengono aggiunti eventuali margini, bordi e spaziature. Quindi è effettivamente impossibile ottenere un contenitore che riempie il suo genitore e che ha un margine, un bordo o una spaziatura.

Nota anche, l'impostazione dell'altezza è notoriamente incoerente anche tra i browser.

Un'altra cosa che ho imparato da quando ho postato questo è che la percentuale è relativa alla lunghezza del contenitore, cioè alla sua larghezza, rendendo una percentuale ancora più inutile per l'altezza.

Oggigiorno, le unità di visualizzazione vh e vw sono più utili, ma non ancora particolarmente utili per qualcosa di diverso dai contenitori di livello superiore.


Un'altra soluzione consiste nell'utilizzare display: tabella che ha un comportamento diverso del modello di box.

Puoi impostare altezza e larghezza al genitore e aggiungere padding senza espanderlo. Il bambino ha il 100% di altezza e larghezza meno le imbottiture.

JSBIN

Un'altra opzione sarebbe quella di utilizzare l'opportunità di dimensionamento della scatola. L'unico problema con entrambi sarebbe che non funzionano in IE7.


Un'altra soluzione: puoi utilizzare unità percentuali per i margini e le dimensioni. Per esempio:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

Il problema principale qui è che i margini aumenteranno / diminuiranno leggermente con la dimensione dell'elemento genitore. Presumibilmente, la funzionalità che si preferisce è che i margini rimangano costanti e che l'elemento figlio cresca / si riduca per riempire i cambiamenti di spaziatura. Quindi, a seconda di quanto sia stretto il tuo display, potrebbe essere problematico. (Vorrei anche avere un margine più piccolo, come lo 0,3%).


  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>






css