Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Problema DIV-CSS

  1. #1

    Problema DIV-CSS

    tanto per farvi capire, ecco un semplcie listato che crea una videata con 5 colonne DIV verticali affiancate e un rettangolo blu nel DIV centrale:

    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
      <
    title></title>
      <
    style type="text/css">
        
    htmlbody#container {
          
    margin0px;
          
    padding0px;
          
    width100%;
          
    height100%;
          
    border0;
        }

        .
    sx1 {
          
    floatleft;
          
    top0px;
          
    width5%;
          
    height100%;
          
    background-colorred;
        }

        .
    sx2 {
          
    floatleft;
          
    top0px;
          
    width:10%;
          
    height100%;
          
    background-colorgreen;
        }

        .
    centrale {
          
    floatleft;
          
    margin0px auto;
          
    top0px;
          
    width:70%;
          
    height100%
        }

        .
    alto {
          
    floatleft;
          
    top300px;
          
    width:30%;
          
    height120%;
          
    background-colorblue;
        }
    </
    style>
    </
    head>

    <
    body>
      <
    div id="container">
        <
    div class="sx1"></div>
        <
    div class="sx2"></div>
        <
    div class="centrale"><div class="alto"></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 container è 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 volenieri "deborda" in basso sullo schermo!

  2. #2
    dopo un pò che mi sono sbattuto ho trovato la soluzione al mio problema!
    riasusmendo, 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 bisogan assegnare anche a A, B, D, E la stessa HEIGHT di C e per farlo ho usato uno script Javascript che viene caricato con

    <body onload="getH()">

    quindi dopo che la pagina viene caricata. Lo script nello HEAD è il seguente:

    Codice PHP:
    <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=0i<divs.lengthi++)
             if (
    != 4divs[i].style.height=altezzaC+"px";
        }
      
    </script> 

  3. #3
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    visto che hai risolto in javascript sposto nel relativo forum,
    potrebbe essere d'aiuto ad altri utenti
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.