Fissare la grandezza di un div

**poliurt** · 05-12-2015, 12:28

Ho un div al cui interno ho degli elementi che tramite css ho animato; il problema è che, attivando le animazioni non ingrandiscono solo gli elementi animati ma anche il div che li contiene. è possibile magari fissare la grandezza del Div che li contiene in modo che non ingrandisca anche lui o attaccare il bordo inferiore del div al fondo della pagina? in modo che magari si regoli anche a secondo della grandezza della finestra?

**ResianTaxidrive** · 05-12-2015, 20:16

SI può vedere la pagina che ti da il problema?

**poliurt** · 06-12-2015, 15:48

purtroppo la pagina non è online in quanto è una prova a scopo didattico ma posso copiare qui il codice visto che non è grandissimo

codice:

<!DOCTYPE html><html>


<head>
    <meta charset="UTF-8">
    <title>Prova animazione</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    <style>
div#contenitore {
    width: 960px;
    background-color: black;
    margin: auto;
}


div#contenitoretabella {             
    width: 920px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #777977;
    text-align: center;
}


table#pippotab1 {
    margin-top: 150px;
    display: inline-block;
}


table#pippotab2 {
    display: inline-block;
    margin-bottom: 200px
}


hr#pippohr {
    border: 0;
    border-bottom: 3px solid #999999;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 190px;
}


img.casella {           
    height: 58px;
    width: 50px;
    padding: 2px;
}


img.casella:hover {
    height: 83px;
    width: 75px;
    animation-name: ingrandisci;
    animation-duration: 1s;
}


@keyframes ingrandisci {   
    from {  height: 58px;
            width: 50px }
    to {    height: 83px;
            width: 75px }
}
    </style>
</head>


<body>
    <div id="contenitore">
        <div id="contenitoretabella">
            <table id="pippotab1">
                <tr>
                    <td><img class="casella" src="image/pippo.png" alt="pippo"></td>
                    <td><img class="casella" src="image/pippo1.png" alt="pippo1"></td>
                    <td><img class="casella" src="image/pippo2.png" alt="pippo2"></td>
                </tr>
            </table>
            <hr id="pippohr">
            <table id="pippotab2">
                <tr>
                    <td><img class="casella" src="image/pippo3.png" alt="pippo3"></td>
                    <td><img class="casella" src="image/pippo4.png" alt="pippo4"></td>
                    <td><img class="casella" src="image/pippo5.png" alt="pippo5"></td>
                </tr>
            </table>
        </div>
    </div>
</body> 
</html>

praticamente quando ingrandiscono gli elementi, si allunga anche il div, è possibile "fissare" il bottom del div alla parte bassa della pagina/finestra del browser o comunque fare in modo che rimanga di un altezza predefinita?

grazie mille già da ora

**ResianTaxidrive** · 06-12-2015, 19:15

Aggiungi queste cose e vedi se può andarti bene

codice:

body, html{
height:100%;
}
div#contenitore {
    width: 960px;
    background-color: black;
    margin: auto;
    height:100%;
}


div#contenitoretabella {             
    width: 920px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #777977;
    text-align: center;
    height:90%;
    
}

Magari regola tu le percentuali in altezza di #contenitore e #contenitoretabella.

**poliurt** · 06-12-2015, 22:02

bastava aggiungere le percentuali

proprio stupido a non averci pensato

grazie mille!!

Discussione: Fissare la grandezza di un div

Strumenti discussione

Ricerca discussione

Visualizza

Fissare la grandezza di un div

Permessi di invio