altezza 100% div

Hie Everyonealtezza 100% div

Sto progettando una pagina Web con un layout fluido. Voglio mantenere una larghezza del 100% e un'altezza del 100%. Il problema è che non so come mantenere i div "left" e "right" con un'altezza del 100% all'interno del loro div genitore, "wrapper".

<div id="container" style="width:100%; height:100%"> 
    <div id="header" style="width:100%; height:100px"> 
    </div> 

    <div id="wrapper" style="width:100%; height:(100% - 100px)"> 
      <div id="left" style="width:250px; height:(100% - 100px)"> 
      </div> 

      <div id="right" style="width:(100% - 250px); height:(100% - 100px)"> 
      </div>   
    </div>   
</div>

Si prega di aiutare.

risposta da doctype.com

CSS

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

HTML

<body> 
<div id="container" style="width:100%; height:100%; position: absolute;"> 
    <div id="header" style="width:100%; height:100px;"> 
header 
    </div> 
    <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;"> 
    <div id="left" style="width:250px; height:100%; float:left;"> 
    left 
    </div> 
    <div id="right" style="width: 250px; height:100%; float:right; "> 
    right 
    </div>   
    main content 
    </div>   
</div> 
</body>

fonte

2010-01-25 Q_Mlilo

Potresti avere una migliore possibilità di risposta se hai chiesto questo nel sito affiliato doctype.com – Spoike

Se ho la comprensione correttamente, si vuole galleggiare div destra e sinistra all'interno del div involucro, ma mantenendo tutta l'altezza del div involucro nella schermata?

In tal caso, il div destro e sinistro ovviamente vanno all'interno del wrapper e si utilizza {... float: left; position: relative;} e {... float: right; posizione: relativo;} per farli galleggiare ai lati.

Ora, poiché hai fluttato questi due div che fanno parte del contenuto del tuo div wrapper, lo stesso wrapper potrebbe avere altezza zero. Questo perché i due div all'interno di "galleggiano fuori di esso".Per dare il tuo involucro della stessa altezza dei due div dentro hanno, è possibile:

mettere questo come un terzo div all'interno del vostro involucro: <div style="clear: both;"></div> O
mettere qualsiasi elemento all'interno del vostro involucro dopo che i due div (come una spanna) e dargli una proprietà CSS di {... clear: both;}

Ora hai "eliminato i galleggianti" e il tuo wrapper ha l'intera altezza delle due div all'interno.

SE IN ALTRA MANO, vuoi che tutti i tuoi contenuti si estendano fino alla massima altezza dello schermo sempre senza riguardo per ciò che hai messo lì, dovrai fare un po 'di magia CSS e diventerà troppo complicato per spiegare senza vedere il tuo codice. Inizia qui: http://ryanfait.com/sticky-footer/

Spero che questo aiuti.

fonte

2010-01-25 09:29:44 Tom

grazie per il collegamento, molto utile! – Lucius

@Lucius: sei il benvenuto ... lo uso da molto tempo, non ha mai avuto problemi. – Tom

prova ad aggiungere

min-height: 100%; al tuo css, chk out this example

fonte

2010-01-25 08:23:01 ant

'min-height' non è ben supportato da tutti i browser – poke

Beh, gli ho dato un esempio .. può vedere tutto lì come raggiungere il suo obiettivo, egli invece causa altezza. Otterrà gli stessi risultati – ant

@poke: IE6 è ancora considerato rilevante se non diversamente specificato? – Anonymous

Per avere un div con il 100% di altezza del browser, anche il genitore deve avere un'altezza del 100%. Prova ad aggiungere il seguente CSS:

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

fonte

2010-01-25 08:23:41 poke

Ho già quel codice. il mio div principale ("contenitore") è ok, ha un'altezza del 100%. La mia intestazione ha un'altezza di 100 px - Voglio div "wrapper" e i suoi figli ("left" e "right") per adattarsi alla visualizzazione dello schermo rimanente. –

Se si fanno tutti gli elementi dello stesso livello siano 100 di larghezza e altezza% si otterrà un comportamento imprevisto tra i browser. Con l'esempio che hai dato stai cercando di dare header e wrapper tutto lo spazio all'interno del genitore.

100% container 
+----------------------------+ 
| 100% header 100% wrapper | 
| +----------+ +-----------+ | 
| |   errr...?  | | 
| +----------+ +-----------+ | 
+----------------------------+

Come è possibile che sia possibile? Ci sono diversi modi per farlo sia:

il primo elemento ottiene tutto lo spazio o,
entrambi devono sovrapporsi o,
entrambi condividono lo spazio

quindi è necessario per essere più specifici quando si danno le percentuali.

A proposito, hai provato gli elementi float?

position: relative; // or absolute 
float: left;

fonte

2010-01-25 08:28:36 Spoike

Ho modificato per dare un po 'di logica a ciò che voglio ottenere. –

altezza 100% div

risposta

Problemi correlati