Questa sembra una domanda davvero amatoriale, secondo me, ma comunque è ancora un'anomalia frustrante.CSS - Come forzare gli elementi al 100% dello spazio rimanente/disponibile dell'elemento genitore senza estendersi oltre?
Questa è in realtà la seconda parte di un problema di 2 parti. La prima parte è piuttosto comune e consiste nel far sì che un elemento si estenda al 100% dell'altezza dell'oggetto principale. Nel mio demo, ho il seguente codice HTML:
<body>
<div id="sbcontainer">
DIV 1
<div id="sbcontent">
DIV 2
<table id="sbmaintable" cellspacing="0">
<tr>
<td>
TABLE
</td>
</tr>
</table> <!-- END MAINTABLE -->
</div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>
Voglio ogni elemento qui per riempire tutto lo spazio verticale all'interno del suo elemento genitore. Ho provato usato il seguente stile su ognuno degli elementi (Si prega di notare che il corpo e HTML hanno previsto anche di altezza 100% nel mio demo):
min-height: 100%;
height: auto !important;
height: 100%;
Il risultato è stato il seguente: 
Come puoi vedere, il DIV più esterno ha seguito la proprietà dell'altezza 100% ma il resto no. Come implicito nella nota dell'immagine, ma non effettivamente mostrato in questa immagine, ho provato a impostare il 2 ° DIV (bordo rosso) ad un'altezza statica di 400 px per vedere se la TABLE all'interno si estendeva al 100% in altezza, e ancora non lo faceva.
Ho poi scoperto che se ho rimosso height:auto; da ciascuno degli elementi, avrebbero seguito la proprietà height 100%, ma con un effetto collaterale indesiderato:
come si può vedere nell'immagine ogni elemento ora è veramente il 100% dell'altezza del suo elemento genitore, costringendo il fondo ad estendersi oltre i confini del suo genitore. (Anche nel mio primo esempio, il DIV più esterno con il bordo verde si è esteso più lontano del desiderato perché sopra c'è un altro DIV di pari livello nella pagina). NOTA: dopo aver osservato con maggiore attenzione, posso vedere che l'elemento TABLE blu non è in realtà la stessa altezza del suo genitore DIV rosso, ma si estende ancora oltre il suo limite. Non sono sicuro che questo significhi qualcosa, ma me ne accorgo.
Mi piacerebbe pensare che questa sarebbe una cosa facile da risolvere, ma nonostante i miei sforzi, non ho avuto successo.
Se tengo solo height:auto; e rimuovo le proprietà 100%, questo non li allunga affatto.
Ho cercato soluzioni su questo tramite Google e StackOverflow, e anche se molti siti coprivano problemi di altezza del 100%, non ho ancora trovato una soluzione reale.
Attualmente sto testando questo in Firefox.
I risultati sono previsti. L'altezza: 100% significa l'altezza dell'elemento genitore. Quando aggiungi contenuto all'elemento genitore, sposta in modo appropriato l'elemento figlio (che ha ancora l'altezza del genitore) (vedi: http://jsfiddle.net/blineberry/rtC9H/). Probabilmente possiamo aiutarti meglio se spieghi l'effetto che stai cercando di ottenere usando 'height: 100%'. È per le immagini? Colori? Potrebbe esserci un altro modo per raggiungerlo. Inoltre, vedi: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – Brent
@Brent - Capisco perché succede. Non è mai stato un mistero per me. Quello che sto cercando è un modo per evitarlo.Sto cercando un modo corretto per forzare un elemento ad estendersi abbastanza da riempire il resto dello spazio rimanente all'interno del suo elemento genitore senza utilizzare figure statiche. Inoltre, la mia domanda era generale, nel senso che non c'è davvero nulla di specifico che sto cercando di costruire per questo. In realtà, non completamente vero. Ho un progetto che potrebbe aver bisogno di questo. Sarà probabilmente strutturato come l'esempio nel mio post (DIV> DIV> TABLE). – vertigoelectric