CSS: impostazione larghezza / altezza come percentuale meno pixel

Sto cercando di creare alcune classi CSS riutilizzabili per maggiore coerenza e meno confusione sul mio sito, e sono bloccato nel tentativo di standardizzare una cosa che uso frequentemente.

Ho un contenitore per il <div>quale non voglio impostare l'altezza (perché varierà a seconda di dove si trova il sito), e al suo interno c'è un'intestazione <div>, quindi un elenco non ordinato di elementi, tutti con CSS applicato a loro.

Sembra molto simile a questo:

Voglio che l' elenco non ordinato occupi la stanza rimanente nel contenitore <div>, sapendo che l'intestazione <div>è 18pxalta. Semplicemente non so come specificare l'altezza della lista come "il risultato di 100%meno 18px".

Ho visto questa domanda posta in un paio di altri contesti su SO, ma ho pensato che varrebbe la pena chiedere di nuovo il mio caso particolare. Qualcuno ha qualche consiglio in questa situazione?

Mi rendo conto che questo è un vecchio post, ma dato che non è stato suggerito vale la pena ricordare che se stai scrivendo per browser compatibili con CSS3, puoi usare calc:

height: calc(100% - 18px);

Vale la pena notare che al momento non tutti i browser supportano la funzione calc () CSS3 standard, quindi potrebbe essere necessario implementare versioni specifiche della funzione del browser come il seguente:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Per un approccio un po 'diverso potresti usare qualcosa di simile nell'elenco:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

Funziona finché ha il contenitore principale position: relative;

Uso Jquery per questo

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

quindi associo il ridimensionamento della finestra per ricalcolarlo ogni volta che viene ridimensionata la finestra del browser (se la dimensione del contenitore viene modificata con il ridimensionamento della finestra)

$(window).resize(function() { setSizes(); });

Non definire l'altezza come percentuale, basta impostare top=0e bottom=0, in questo modo:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Presumendo un'altezza dell'intestazione di 17 px

Elenco css:

height: 100%;
padding-top: 17px;

Header css:

height: 17px;
float: left;
width: 100%;

1. Usa i margini negativi sull'elemento su cui desideri meno i pixel. (elemento desiderato)
2. Rendere overflow:hidden; l'elemento contenente
3. Passa overflow:auto;all'elemento desiderato.

Ha funzionato per me!

Prova il dimensionamento delle scatole. Per l'elenco:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

Per l'intestazione:

position: absolute;
left: 0;
top: 0;
height: 10px;

Ovviamente, il contenitore padre dovrebbe avere qualcosa del tipo:

position: relative;

Un altro modo per raggiungere lo stesso obiettivo: scatole flessibili . Trasforma il contenitore in una scatola flessibile a colonna, quindi hai tutta la libertà di consentire ad alcuni elementi di avere dimensioni fisse (comportamento predefinito) o di riempire / restringere lo spazio del contenitore (con flex-grow: 1 e flex- shrink: 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Vedi https://jsfiddle.net/2Lmodwxk/ (prova ad estendere o ridurre la finestra per notare l'effetto)

Nota: è inoltre possibile utilizzare la proprietà stenografia:

   flex:1 1 auto;

Ho provato alcune delle altre risposte, e nessuna di esse ha funzionato come volevo. La nostra situazione era molto simile quando avevamo un'intestazione della finestra e la finestra era ridimensionabile con le immagini nel corpo della finestra. Volevamo bloccare le proporzioni del ridimensionamento senza dover aggiungere calcoli per tenere conto delle dimensioni fisse dell'intestazione e far sì che l'immagine riempisse il corpo della finestra.

Di seguito ho creato uno snippet molto semplice che mostra ciò che abbiamo finito facendo che sembra funzionare bene per la nostra situazione e dovrebbe essere compatibile con la maggior parte dei browser.

Sul nostro elemento finestra abbiamo aggiunto un margine di 20 px che contribuisce al posizionamento rispetto ad altri elementi sullo schermo, ma non contribuisce alla "dimensione" della finestra. L'intestazione della finestra viene quindi posizionata in modo assoluto (il che la rimuove dal flusso di altri elementi, quindi non causerà lo spostamento di altri elementi come l'elenco non ordinato) e la sua parte superiore viene posizionata -20px che posiziona l'intestazione all'interno del margine della finestra. Alla fine il nostro elemento ul viene aggiunto alla finestra e l'altezza può essere impostata al 100%, il che farà sì che riempia il corpo della finestra (escluso il margine).

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}

<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Grazie, ho risolto il mio con il tuo aiuto, modificandolo un po 'poiché voglio un div 100% larghezza 100% altezza (meno altezza di una barra inferiore) e nessun scorrimento sul corpo (senza hack / nascondere le barre di scorrimento).

Per CSS:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

Per HTML:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>  

Questo ha funzionato, oh sì ho messo un valore un po 'più grande su div. Regolato per l'altezza inferiore rispetto all'altezza della barra inferiore, altrimenti appare la barra di scorrimento verticale, ho regolato per essere il valore più vicino.

Quella differenza è perché uno degli elementi nell'area dinamica sta aggiungendo un ulteriore foro inferiore che non so come eliminare ... è un tag video (HTML5), si prega di notare che ho messo quel tag video con questo css ( quindi non c'è motivo per fare un buco in basso, ma lo fa):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

L'obiettivo: avere un video che prende il 100% del browser (e si ridimensiona in modo dinamico quando il browser viene ridimensionato, ma senza alterare le proporzioni) meno uno spazio inferiore che uso per un div con alcuni testi, pulsanti, ecc. (E validatori w3c e css ovviamente).

EDIT: ho trovato il motivo, il tag video è come il testo, non un elemento a blocchi, quindi l'ho risolto con questo css:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Nota il display:block;tag sul video.

Non sono sicuro che questo funzioni nella tua particolare situazione, ma ho scoperto che il riempimento all'interno del div interno sposterà il contenuto all'interno di un div se il div contenente è di dimensioni fisse. Dovresti float o posizionare in modo assoluto il tuo elemento header, ma per il resto non l'ho provato per div di dimensioni variabili.