Pure CSS: espandere colonne verticalmente

Forum di discussione su HTML5, CSS, XHTML, XML, XSL

Moderatore: Toki

Regole del forum
Leggi: IProgrammatori.it - Regolamento Forum
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 16 apr 2017, 17:54

Sono intrappolato in un progetto web che prevede la realizzazione di un sito statico. Allo scopo sto usando il framework Pure CSS, solo che non riesco a far sì che che le due colonne occupino tutto lo spazio disponibile della pagina.
HTML

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/pure-min.css">
        <link rel="stylesheet" href="css/grids-responsive.css">
        <link rel="stylesheet" href="css/customize.css">
    </head>
    <body>
        <div class="pure-g">
            <div class="pure-u-1-5" style="background-color: darkblue;">
           
            </div>
            <div class="pure-u-4-5">
                <h1 class="page-title">Titolo Pagina</h1>
                <h3 class="page-subtitle">Qui ci va un sottotitolo</h3>
            </div>
        </div>
        <div class="pure-g">
            <div class="pure-u-1-5">
                <div class="pure-menu dark-menu">
                    <ul class="pure-menu-list">
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                    </ul>
                </div>
            </div>
            <div class="pure-u-4-5 main-content">
                <p class="main-text">Contenuto</p>
            </div>
        </div>
       
    </body>
</html>

CSS

Codice: Seleziona tutto

.page-title
{
    text-align: center;
    color:darkblue;
}
.page-subtitle
{
    text-align: center;
    color:darkblue;
}
.footer-notes
{
    text-align: center;
}
.dark-menu
{
    background-color:darkblue;
}
.nav-text
{
    color:white;
}
.main-content
{

   
}
.main-text
{
    color:darkblue;
}


Allego anche un'immagine che illustra chiaramente il problema. Qualunque suggerito è ben accetto, anche perché non vedo l'ora di finire sta roba.
Allegati
viewport.PNG
viewport.PNG (17.79 KiB) Visto 56 volte
sebaldar
Utente Junior
Messaggi: 80
Iscritto il: 10 apr 2017, 15:58

Re: Pure CSS: espandere colonne verticalmente

Messaggioda sebaldar » 16 apr 2017, 18:45

Non riesco a provare il tuo codice perché sono su un Tablet, comunque un metodo semplice per ottenere due colonne é innanzitutto di raccogliere il tutto in un div contenitore con proprietà margin impostata 0 auto, quindi in ciascuno dei due div colonna imposta display a inline-block e width a 49%.
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Re: Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 16 apr 2017, 19:28

Purtroppo così facendo, "Contenuto" si sovrappone al menù a sinistra.
sebaldar
Utente Junior
Messaggi: 80
Iscritto il: 10 apr 2017, 15:58

Re: Pure CSS: espandere colonne verticalmente

Messaggioda sebaldar » 16 apr 2017, 19:45

Be, non ti so dire, mi sarò spiegato male perchè deve funzionare.
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Re: Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 16 apr 2017, 20:07

Il CSS aggiornato è questo:

Codice: Seleziona tutto

.page-title
{
    text-align: center;
    color:darkblue;
}
.page-subtitle
{
    text-align: center;
    color:darkblue;
}
.footer-notes
{
    text-align: center;
}
.dark-menu
{
    background-color:darkblue;
    display: inline-block;
}
.nav-text
{
    color:white;
}
.main-content
{

    display: inline-block;
}
.main-text
{
    color:darkblue;
}
.container
{
    margin: 0 auto;
}

HTML

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/pure-min.css">
        <link rel="stylesheet" href="css/grids-responsive.css">
        <link rel="stylesheet" href="css/customize.css">
    </head>
    <body>
      <div class="container">
            <div class="pure-g">
                <div class="pure-u-1-5" style="background-color: darkblue;">

                </div>
                <div class="pure-u-4-5">
                    <h1 class="page-title">Titolo Pagina</h1>
                    <h3 class="page-subtitle">Qui ci va un sottotitolo</h3>
                </div>
            </div>
            <div class="pure-g">
                <div class="pure-u-1-5">
                    <div class="pure-menu dark-menu">
                        <ul class="pure-menu-list">
                            <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                            <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                            <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                            <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                            <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                            <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                            <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        </ul>
                    </div>
                </div>
                <div class="pure-u-4-5 main-content">
                    <p class="main-text">Contenuto</p>
                </div>
            </div>
        </div>
    </body>
</html>
Allegati
viewport-bis.PNG
viewport-bis.PNG (16.89 KiB) Visto 44 volte
sebaldar
Utente Junior
Messaggi: 80
Iscritto il: 10 apr 2017, 15:58

Re: Pure CSS: espandere colonne verticalmente

Messaggioda sebaldar » 16 apr 2017, 21:18

Se non risolvi prima domani ti do una mano
sebaldar
Utente Junior
Messaggi: 80
Iscritto il: 10 apr 2017, 15:58

Re: Pure CSS: espandere colonne verticalmente

Messaggioda sebaldar » 17 apr 2017, 09:59

Intendevo una struttura semplice come quella che ti allego

Codice: Seleziona tutto

<!DOCTYPE html>
<html lang="it">
   <head>
      <style type="text/css">
         #container {
            margin:0 auto;
            text-align:center;
         }
         #container .column {
            display: inline-block;
            width:40%;
            text-align:left;
            padding:20px;
         }
         #header, #footer {
            text-align:center;
            margin: 20px;
            font-weight:bold;
         }
      </style>
   </head>
   <body>
      <div id="header">Questo è l'header</div>
      <div id="container">
         <div class="column">
            <h3>Colonna uno</h3>
Nel mezzo del cammin di nostra vita mi ritrovai in una selva oscura che la diritta via era smarrita.
         </div>
         <div class="column">
            <h3>Colonna due</h3>
Tempera del principio del mattino e il sol montava in su con quelle stelle ch'eran con lui quando l'amor divino mosse per primo quelle cose belle.
         </div>
      </div>
      <div id="footer">Questo è il footer</div>
   </body>
</html>



devi fare solo attenzione alla width delle colonne perchè è sensibile ad aventuali margin o padding del div (di cui devi tenere conto).
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Re: Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 17 apr 2017, 11:08

Il problema della larghezza non ce l'ho, sia usando i framework Bootstrap([url]getboostrap.com[/url]) e PureCSS([url]purecss.io[/url]), sia realizzando il layout mano con float o flexbox. Il problema che ho con tutte le soluzioni riguarda solo l'altezza, nemmeno i margini perché esiste box-sizing: border-box. Faccio una prova con la struttura che hai postato, anche se non ho la necessità di creare colonne e righe in CSS, ma solo di riempire verticalmente lo spazio delle colonne mantenendo le classiche percentuali 20%-80% per menù e contenuto.
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Re: Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 19 apr 2017, 16:47

Ho provato il tuo codice, ma dà sempre il solito problema del footer troppo in alto.
Allegati
cattura.PNG
cattura.PNG (14.35 KiB) Visto 18 volte
sebaldar
Utente Junior
Messaggi: 80
Iscritto il: 10 apr 2017, 15:58

Re: Pure CSS: espandere colonne verticalmente

Messaggioda sebaldar » 19 apr 2017, 17:30

Usa margin-top su #footer.
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Re: Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 19 apr 2017, 17:56

sebaldar ha scritto:Usa margin-top su #footer.

Naturalmente con margin-top funziona, solo che devo mettere un margine fisso e ciò non va bene dato che il sito deve essere, come amano chiamarlo gli amanti del web, "responsive". Di certo non mi posso mettere a fare una "at-rule" per ogni risoluzione disponibile sul mercato.
sebaldar
Utente Junior
Messaggi: 80
Iscritto il: 10 apr 2017, 15:58

Re: Pure CSS: espandere colonne verticalmente

Messaggioda sebaldar » 19 apr 2017, 20:23

Non capisco, così è "responsive", fammi un esempio di cosa intendi
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Re: Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 20 apr 2017, 20:27

Intendo dire che impostando un margine superiore fisso, in pixel, si perde in adattabilità dovendo di conseguenza ricorrere alle @media queries per ciascuna delle maggiori risoluzioni in commercio.
sebaldar
Utente Junior
Messaggi: 80
Iscritto il: 10 apr 2017, 15:58

Re: Pure CSS: espandere colonne verticalmente

Messaggioda sebaldar » 21 apr 2017, 06:50

Fallo in em o percento
loopunrolling
Utente Semi-Senior
Messaggi: 153
Iscritto il: 23 nov 2015, 00:51

Re: Pure CSS: espandere colonne verticalmente

Messaggioda loopunrolling » 21 apr 2017, 16:10

Ho già provato e non funziona. Sto valutando flexbox.

Torna a “HTML e CSS”

Chi c’è in linea

Visitano il forum: Nessuno e 4 ospiti