Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    371

    problema div a piena colonna

    ho questa situazione una colonna "colum1" con dentro 2 div "widget"

    <div class="colum1">
    <div class="widget" draggable="true">
    <header><span>Titolo1</span></header>
    <div id="widget1" class="widget-main" style="display:block;">box1</div>
    </div>
    <div class="widget" draggable="true">
    <header><span>Titolo2</span></header>
    <div id="widget2" class="widget-main" style="display:block;">box2</div>
    </div>
    </div>
    vorrei che i 2 div occupassero l'intera colonna

    .colum1 {
    position: relative;
    height: auto;
    min-height: 100%;
    width: 20%;
    }
    in questo modo la colonna occupa tutto lo spazio a lei a disposizione e fino qui TUTTO OK
    poi ho provato a mettere
    .widget {
    position:relative;
    height: auto;
    min-height: 50%;
    }
    per far occupare ai 2 div il 50% cad. dello spazio all'interno della colonna....... ma non funziona....perche???
    Attenzione ho una funzione che nascondende uno dei 2 div mettendo display:none
    e a quel punto l'altro div rimanente dovrebbe occupare l'intero spazio height... come posso fare???

  2. #2
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    371
    nessuno sa darmi una mano......
    ho sentito parlare di false colonne...... ma come posso risolvere???

  3. #3
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    A me col tuo codice funziona:

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento senza titolo</title>
    <style type="text/css">
    <!--
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    #column {
    	height:100%;
    	background-color:#CCCCCC;
    }
    #widget1 {
    	height:auto;
    	min-height:50%;
    	background-color: #CC99FF;
    }
    #widget2 {
    	height:auto;
    	min-height:50%;
    	background-color: #99CCFF;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="column">
     <div id="widget1">Inserire qui il contenuto per widget1</div>
     <div id="widget2">Inserire qui il contenuto per widget2</div>
    </div>
    </body>
    </html>
    a questo punto, quella stessa funzione che usi per impostare il display di un div su none può essere usata per impostare l'altezza dell'altro div sul 100%

  4. #4
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    371
    hai ragione cosi funziona mi era rincoglionito con i min-height....
    Grazie

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 © 2026 vBulletin Solutions, Inc. All rights reserved.