• E
    User •

    Problema DIV-CSS

    Ciao a tutti! ho un problemino col layout tableless di un sito....tanto per farvi capire, ecco un semplice listato che crea una videata con 5 colonne DIV verticali affiancate e un rettangolo blu centrato nel DIV centrale:

    
 <html>

<head>
  <title></title>
  <style type="text/css">
    html, body, #container {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: auto;
      border: 0;
    }

    .sx1 {
      float: left;
      top: 0px;
      width: 5%;
      height: 100%;
      background-color: red;
    }

    .sx2 {
      float: left;
      top: 0px;
      width:10%;
      height: 100%;
      background-color: green;
    }

    .centrale {
      float: left;
      margin: 0px auto;
      top: 0px;
      width:70%;
      height: 100%
    }

    .inMezzo {
      top: 300px;
      width:30%;
      height: 120%;
      margin: 0px auto;
      background-color: blue;
    }
</style>
</head>

<body>
  <div id="container">
    <div class="sx1"></div>
    <div class="sx2"></div>
    <div class="centrale"><div class="inMezzo"></div></div>
    <div class="sx2"></div>
    <div class="sx1"></div>
  </div>
</body>

</html>

```Il rettangolo blu scende oltre il fondo dello schermo, dato che la height di è 100%. Se però vorrei che anche il container contenga tutto il riquadro blu in teoria dovrei usare height: auto nella definizione di html, body,#container, ma non funziona!
Pertanto come posso fare in modo che l'altezza height del container si adatti perfettamente al height del riquadro blu? 
lo chiedo perchè ho a che fare con una tabella mysql dinamica che spesso e volentieri "deborda" in basso sullo schermo!
    0
  • E
    User •

    Dopo un pò che mi sono sbattuto ho trovato la soluzione al mio problema!
    Riassu[.]mendo: supponiamo di avere una videata con 1 div CONTAINER (WIDTH=100% e HEIGHT=AUTO) e 5 DIV affiancati: A, B, C, D, E. Tutti tranne C quello centrale hanno un WIDTH di 5% quindi il centrale C avrà WIDTH=80%. Se però per tutti tranne C metto HEIGHT=100% e C ha un HEIGHT=120% (per esempio), mi viene visualizzato solo C spostato a sinistra.
    Per risolvere il problema ho pensato che bisogna assegnare anche a A, B, D, E la stessa HEIGHT di C e per farlo ho usato uno script Javascript che viene caricato con

    [html]<body onload="getH()">[/html]Quindi dopo che la pagina viene caricata. Lo script nello HEAD è il seguente:

    [html]<script type="text/javascript">
    function getH() {
    // assegna ad una variabile l'altezza in pixel del div C quello centrale
    var altezzaC = document.getElementById("C").offsetHeight;
    // assegna al div 'container' l'altezza di C
    document.getElementById("container").style.height = altezzaC+"px";
    // crea un array di tutti i div contenuti nella pagina
    var divs = document.getElementsByTagName("div");
    // a tutti i DIV tranne quello centrale C vien assegnata l'altezza di C
    for (var i=0; i<divs.length; i++)
    if (i != 4) divs*.style.height=altezzaC+"px";
    }
    </script>[/html]

    0
Effettua l'accesso per rispondere