• F
    User Newbie •

    container si riduce, div restano fuori

    ciao!

    ho questo problema:
    Nel template che ho iniziato a realizzare ieri sera il mio div "container" si riduce a tre quarti pagina e non copre tutti i div all'interno (come quello "news"), mentre io vorrei che questo si allungasse dinamicamente man mano che aggiungo contenuto, senza che questo esca dal container.
    Come fare?

    Io ho impostato

    
html, body{height: 100%;}
#container{height: 100%}

```Secondo: se io elimino il bordo del container (1px solid #000) ho notato che si riduce in altezza l'header. A cosa è dovuto?


Sono graditissimi altri suggerimenti/critiche, sto imparando da qualche mese quindi sono ancora inesperto

grazie!
francio
    0
  • M
    User •

    Purtroppo height:100%è come se non venisse considerato.
    Prova ad impostare auto oppure metti un altezza minima.

    0
  • C
    User •

    Ciao!

    Se ho capito bene container dovrebbe contenere appunto altri DIV e vorresti che si allungasse in altezza in base al contenuto giusto?

    In caso io abbia capito, la soluzione è NON impostare un altezza a container. Questo permette ai figli di "container" di determinarne l'altezza in base alla somma dello spazio che i figli occupano.

    Fai attenzione che questa soluzione vale per tutti i browser meno che per IE6 e forse anche IE7

    • la soluzione per ie6 e ie7 è di impostare il valore "height" del "container" uguale allo "0".
      Ovviamente però devi caricare un CSS a parte nel codice html per operare questa soluzione tramite i commenti condizionali.

    Spero di essere stato utile. Ciao!

    0
  • B
    User Attivo •

    Ciao, si può fare tutto con un unico css, ma il valore da dare a "height" per explorer non è zero ma 100%.
    Sul css, fermo restando il 100% al body e all'html, devi impostare questi valori per il container (questo è un esempio di container largo 800px centrato orizzontalmente):
    #container {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    min-height: 100%;
    }

    • html {
      height: 100%
      }

    Io utilizzo spesso la tecnica del footer che rimane sempre a fondo pagina e ultimamente integro tutto così (sempre 100% html e body, con footer alto 50px)

    width: 800px;
    margin-right: auto;
    margin-left: auto;
    min-height: 100%;
    height: auto !important; /per gli altri browser/
    height: 100%; /per IE 6/
    margin-bottom: -50px;
    }
    #footer {
    width: 800px;
    height: 50px;
    margin-right: auto;
    margin-left: auto;
    }

    e queste due classi prima della chiusura del container

    .clear {
    line-height: 1px;
    clear: both;
    }
    .push {
    height: 50px;
    line-height: 50px;
    }

    IMPORTANTE: il footer deve stare fuori dal container.

    0
Effettua l'accesso per rispondere