Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    altezza DIV 100% restante

    Buonasera, non ne esco da un problema, vorrei creare tramite dei div una pagina suddivisa in 3 righe.

    La riga superiore, altezza 100px fissa superiore.
    la riga centrale, tutto lo spazio libero della pagina (altezza della pagina - header - footer), con overflow: auto;
    la riga inferiore, altezza 20px fissa sul fondo.

    Se ragionassi con le tabelle, creerei una riga da 100, una da 100% e l'ultima da 20.

    In questo caso la proprietà del div a height: 100%; non funziona correttamente. Tantomeno 100vh.

    come posso risolvere il mio problema?

    Saluti
    PIERCHI

  2. #2
    https://csslayout.io/holy-grail/


    questo è un esempio che dovrebbe fare al caso tuo.

  3. #3
    Quote Originariamente inviata da graffithouse Visualizza il messaggio
    https://csslayout.io/holy-grail/


    questo è un esempio che dovrebbe fare al caso tuo.
    Effettivamente è l'esempio che fa al caso mio, però è la cella centrale che si adatta orizzontalmente. Io cercherei di fare questo in verticale... è lì che mi sono perso.

    Vorrei questa cosa, perchè il mio header ha un Heght: auto; e si adatta al testo contenuto.
    Non posso mettere il div centrale con un border-top fisso.
    PIERCHI

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,267
    Ciao, in genere flexbox può essere una valida soluzione in situazioni del genere ma è possibile risolvere anche in altri modi.

    Se header non ha altezza fissa si può usare position:sticky con una cosa di questo tipo:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
        <title>Esempio</title>
        <style>
          html, body {
            margin: 0;
          }
          header {
            position: sticky;
            top: 0;
            background: tomato;
          }
          main {
            padding-bottom: 20px; /* come altezza footer */
          }
          footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 20px;
            background: gold;
          }
        </style>
      </head>
      <body>
        <header>
          HEADER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper. 
        </header>
        <main>
          MAIN Quisque suscipit sem non est eleifend consectetur. Suspendisse malesuada massa lorem, id pharetra arcu iaculis a. 
          Aliquam in dolor vitae purus interdum vulputate vel ac augue. Nulla congue vehicula purus eget scelerisque. 
          Nullam suscipit metus id sem eleifend, ut molestie eros dictum. Curabitur faucibus urna nec ullamcorper pharetra. 
          Nunc eget lacus at arcu scelerisque gravida ut non lectus. Donec sit amet felis in justo hendrerit ornare eu sed risus. 
          Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam. 
          Sed nibh ante, tempor ac eleifend non, sodales a massa. Phasellus ornare elementum semper. 
          Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
        </main>
        <footer>
          FOOTER
        </footer>
      </body>
    </html>
    Vedi se ti può andare bene. Fai sapere.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  5. #5
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, in genere flexbox può essere una valida soluzione in situazioni del genere ma è possibile risolvere anche in altri modi.

    Se header non ha altezza fissa si può usare position:sticky con una cosa di questo tipo:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
    ...
        </footer>
      </body>
    </html>
    Vedi se ti può andare bene. Fai sapere.
    Provato e funziona alla grande! Adesso lo adatto alle mie necessità!

    Grazie!
    PIERCHI

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