Come posso ridimensionare un div a 100% di altezza e larghezza all'interno di un altro elemento

Come posso ridimensionare un div a 100% di altezza e larghezza all'interno di un altro elemento? Nel mio caso un td circostante. Dato che sono un plugin, non riesco a controllare l'altro HTML sulla pagina. Ecco il mio codice HTML:Come posso ridimensionare un div a 100% di altezza e larghezza all'interno di un altro elemento

<body style="height:100%;"> 
    <table width="600px" height="400px" border="1"> 
    <tr> 
     <td style="background-color:silver;">Cell 1</td> 

     <td style="background-color:silver;"> 
    <div style="height:100%; background-color:yellow;"> 
     <div style="min-height:100%; height:100%; background-color:red;"> 
     Cell 2 
     </div> 
    </div> 
     </td> 
    </tr> 
    </table> 
</body>

Quindi, il div di Cell 2 dovrebbe essere massimizzato. C'è un modo cross browser per fare questo? Perché è così complicato?

fonte

2009-02-21 mzehrer

cosa c'è di sbagliato con il codice sopra ??? appena aperto in FF3 e IE6/7, e il div RED occupa l'intera cella. –

Perché entrambi avere un div in un div se il suo sarà il 100% dell'altezza e della larghezza? Non c'è altro modo di usare semplicemente il div contenente per il tuo scopo?

Probabilmente non funziona perché l'altezza non riesce a meno che l'elemento di contenimento non abbia applicato un'altezza definita.

fonte

2009-02-21 10:48:24 Sam152

Ho bisogno del div per aggiungere una mappa di google ad esso. – mzehrer

Non puoi semplicemente inserire la mappa di google e lasciare che riempia il div originale? – Sam152

Guarda this stack overflow question ... dopo aver esaminato the top rated answer in questa domanda, sembra che devi impostare l'altezza del contenitore al 100% e "altezza minima, altezza" di un elemento figlio al 100%.

Vai this website per ulteriori informazioni - l'HTML sottostante è versione del sito web

<div style="height:100%;"> 
    <div style="min-height:100%; height:100%; background-color:red;"> 
    put your content here 
    </div> 
</div>

fonte

2009-02-21 10:49:57

Questo non funziona per me, vedere il mio esempio modificato nella domanda. – mzehrer

?? il tuo tavolo è alto 400px, il div non andrà oltre quello –

Questo mi ha sorpreso anche io - il collegamento fornito ha risolto il problema. Nel mio caso anche l'altezza di html e body era 100% –

stripped-down Utilizzo di javascript/jquery si può facilmente ottenere l'altezza dell'elemento genitore e ridimensionare il div di conseguenza.

Tuttavia, poiché il div si trova in una cella di tabella, la larghezza non è fissa in quanto la cella si espanderà e si contrarrà in base al contenuto delle altre celle nella tabella. Quindi non c'è davvero una larghezza corretta, la cella si adatterà in base al contenuto di tutte le celle.

A proposito, il tuo problema di altezza potrebbe essere risolto facilmente impostandolo su 400px, ma suppongo che la struttura della tabella mostrata sia solo un esempio (1 riga, altezza 400px ...).

fonte

2009-02-21 15:48:13 jeroen

Ho pensato che questo potesse essere risolto usando solo HTML/CSS. E sì, il 400px sono solo per esempio. – mzehrer

Come ho detto, non esiste una risposta corretta perché l'altezza e la larghezza delle celle della tabella cambiano automaticamente, quindi non penso che esista una soluzione html/css. – jeroen

Come posso ridimensionare un div a 100% di altezza e larghezza all'interno di un altro elemento

risposta

Problemi correlati