HTML / CSS: crea un div che riempie sempre l’intera pagina … e quindi un div ridimensionabile al suo interno?

Sento che questa è una domanda facile, ma per qualche ragione non riesco a capirlo oggi.

Ho bisogno di un div che riempie sempre l’intera pagina, non importa quanto sia grande quella pagina. Quindi ho bisogno di un altro div che possa essere ridimensionato con javascript (mydiv.style.width = x; mydiv.style.height = y;).

Se il secondo div è ridimensionato per essere più alto dell’altezza della finestra del browser esistente, il primo div dovrebbe ridimensionarsi per adattarsi.

Ad esempio, se il colore di sfondo della prima div è rosso, non dovrei mai vedere alcun colore di sfondo bianco, perché il primo div si espande sempre alla dimensione dell’intera pagina.

Ho provato questo, non funziona perché lo sfondo rosso non si espande alla dimensione dell’intera pagina:

esempio del problema

Penso che l’alternativa di Zack sia la migliore risposta: l’elemento body è un elemento block-level che riempie sempre l’intera ‘pagina’. Puoi collegarti con JavaScript e CSS, proprio come puoi con un div. Colora l’elemento del tuo body rosso e non vedrai mai il bianco se il tuo div interno è ridimensionato. Se non si desidera applicare il CSS a tutte le pagine del sito, aggiungere una class o un ID al corpo della pagina che si desidera modificare e scrivere il CSS per selezionare solo gli elementi del corpo con una class o un ID specifici.

Mi manca un requisito che non viene affrontato utilizzando l’elemento body ?

Continuo a essere devastato dai puristi CSS per questo, ma recentemente ho risolto questo problema utilizzando un tavolo.

Hai bisogno di un div esterno, impostato su “position: relative” e 100% height, e quindi inserisci una tabella all’interno, anche al 100% in ciascun modo.

Altre spiegazioni qui: http://wondersofcomputing.blogspot.com/2009/07/table-height-browser-window-height.html

Sei libero di respingere la soluzione del tavolo. Ma poi non posso aiutarti.

Che ne dici di questo?

 if (wholePageDiv.style.height < myDiv.style.height) { wholePageDiv.style.height = myDiv.style.height + 10 } 

Un'alternativa - se il div di sfondo deve essere solo un colore - è semplicemente impostare il colore di sfondo del corpo in base a qualsiasi cosa tu abbia bisogno. Quindi non devi preoccuparti di ridimensionare lo sfondo in javascript.

Santo crap ive risolto, un DIV COMPLETAMENTE CENTRATO, divertiti.

EDIT: piccola correzione estetica


index.htm

 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">   Universal vertical center with CSS     

CENTERED CONTENT