[HTML] Distanza esatta tra due div

samurai.sette · 6 Nov 2017

Ciao a tutti. Vorrei chiedervi un consiglio su come risolvere un piccolo problema.
Come potete vedere dall'immagine che ho allegato ho una pagina costituita da 3 div (intestazione,corpo,fondo).
Quello che vorrei fare è questo: in cima alla pagina vorrei posizionare il div "intestazione" con altezza 50px, in fondo alla pagina posizionare il div "fondo" con altezza 50px e tra i due div posizionare il div "corpo".
Come faccio a conoscere in modo preciso la distanza che separa il div "intestazione" dal div "fondo"?
Non vorrei far comparire lo scroolbar verticale.

Questo è quello che ho scritto io:

HTML:

    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font-size:40px;
        text-align:center;
        }
    #intestazione {
        width:100%;
        height:50px;
        background-color:green;
        position:absolute;
        top:0;
        }
    #corpo {
        width:100%;
        height:300px;
        background-color:yellow;
        position:absolute;
        top:50px;
        }
    #fondo {
        width:100%;
        height:50px;
        background-color:blue;
        position:absolute;
        bottom:0;
        }
    </style>

Ciao, grazie mille.

Max 1 · 6 Nov 2017

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
    * {
        overflow:hidden;
        }
    body {
        margin:0;
        padding:0;
        font-size:40px;
        text-align:center;
        }
    #intestazione {
        width:100%;
        height:50px;
        background-color:green;
        }
    #corpo {
        width:100%;
        background-color:yellow;
        }
    #fondo {
        width:100%;
        height:50px;
        background-color:blue;
        }
    </style>
</head>

<body>
<div id="intestazione">
    Inserite qui il contenuto per  id "intestazione"
</div>
<div id="corpo">
    Inserite qui il contenuto per  id "corpo"
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="fondo">
    Inserite qui il contenuto per  id "fondo"
</div>
</body>
</html>

samurai.sette · 6 Nov 2017

Ciao Max, grazie per la risposta.
La tua soluzione non va bene perché non definisci un'altezza del div "corpo". Di conseguenza il div "fondo" può vedersi o meno, dipende dal monitor.
Quello che vorrei fare è questo:
1. eliminare lo scrollbar verticale come hai fatto tu;
2. posizionare in alto ed in basso i div "intestazione" e "fondo";
3. tra i div "intestazione" e "fondo" inserire il div "corpo" la cui altezza deve adattarsi a qualsiasi schermo.
Quindi, come faccio ad adattare l'altezza del div?
Ciao, grazie mille.

Max 1 · 6 Nov 2017

Si può fare ma poi se il contenuto del corpo supera lo spazio tra intestazione e fondo senza la scrollbar l'eccedenza del contenuto non si vede più, a meno che tu non accetti lo scroll solo nel corpo

samurai.sette · 6 Nov 2017

Ciao Max.
La tua precisazione è giustissima, infatti volevo inserire lo scroll solo nel corpo e non in tutta la pagina.
Mi puoi dare una dritta su come fare?

Max 1 · 6 Nov 2017

Codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
    body {
        margin:0;
        padding:0;
        font-size:40px;
        text-align:center;
        }
    #intestazione {
        width:100%;
        height:50px;
        position:fixed;
        top:0;
        background-color:green;
        overflow:hidden;
        }
    #corpo {
        width:100%;
        height:100%;
        margin:50px;
        background-color:yellow;
        overflow:auto;
        }
    #fondo {
        width:100%;
        height:50px;
        background-color:blue;
        overflow:hidden;
        position:fixed;
        bottom:0;
        }
    </style>
</head>

<body>
<div id="intestazione">
    Inserite qui il contenuto per  id "intestazione"
</div>
<div id="corpo">
    Inserite qui il contenuto per  id "corpo"
</div>
<div id="fondo">
    Inserite qui il contenuto per  id "fondo"
</div>
</body>
</html>

marino51 · 7 Nov 2017

prova questo layaout, si adatta alla dimensione della finestra,
per una gestione migliore ho diviso "core" da "decoration", la seconda sezione è da riempire
ho lasciato anche la parte html per una miglior comprensione

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Layout Test</title>
<style type="text/css">

/*-------------------------------------------------------- core layout */

html,body
{
    height: 100%;
}

body
{
    margin: 0;
    min-width: 678px
}

#wrapper, #content
{
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}

.row
{
    display: table-row;
}

#header, #middle, #footer
{
    display: table-cell;
}

#middle
{
    height: 100%;
}

#content-1, #content-3
{
    display: table-cell;
    height: 100%;
    width: 15%;

    vertical-align: top;
}

#content-2
{
    display: table-cell;
    height: 100%;
    width: 70%;

    vertical-align: top;
}

/*--------------------------------------------------------*/

#myTable
    {
    margin-top: 3%;
    }

#myTable thead
    {
    display: table-row;
    }

#myTable tbody
    {
    display: block;
    overflow-x: hidden;
    max-height: 400px;
    }

/*-------------------------------------------------------- decoration */

html,body
{
    text-align: center;
}

    </style>
</head>
<body>

        <div id="wrapper">

            <div class="row">
                <div id="header">
                    <h3>titolo</h3>
                    <h3>sottotitolo</h3>
                </div>
            </div>

            <div class="row">
                <div id="middle">
                    <h4>titolo della pagina</h4>

                    <form name="myForm" method="POST" action="">
                        <div id="content">

                            <div id="content-1">
                                contenuto della prima colonna
                            </div>

                            <div id="content-2">
                                contenuto della seconda colonna
                            </div>

                            <div id="content-3">
                                contenuto della terza colonna
                            </div>

                        </div>

                        <input type="hidden" name="MainForm" value="1" />
                    </form>

                </div>
            </div>

            <div class="row">
                <div id="footer">
                    <h4>piede della pagina</h4>
                    <h4>
                        <a href="#"  title="Imprint - Legal Notice/Copyright">Imprint - Legal Notice/Copyright</a>
                        <span> </span>
                        <a href="#"  title="Data Privacy">Data Privacy</a>
                        <span> </span>
                        <a href="#" title="Term of use">Term of use</a>
                    </h4>
                </div>
            </div>
            
        </div>
</body>
</html>

samurai.sette · 7 Nov 2017

Ciao ragazzi, grazie mille.
I vostri consigli sono stati utilissimi, grazie ancora!!!

Cerca

Cerca

[HTML] Distanza esatta tra due div

samurai.sette

Utente Attivo

Max 1

Super Moderatore

samurai.sette

Utente Attivo

Max 1

Super Moderatore

samurai.sette

Utente Attivo

Max 1

Super Moderatore

marino51

Utente Attivo

samurai.sette

Utente Attivo

Discussioni simili