Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Altezza div relativa al div a fianco

  1. #1

    Altezza div relativa al div a fianco

    Ciao a tutti,

    mi trovo di fronte ad una situazione inusuale:

    ho un div che contiene 2 colonne. Nella prima ho un testo che deve essere sempre visibile mentre nella seconda ho uno scrolling div (il testo è molto lungo) che dovrebbe adattarsi in altezza per essere sempre alto uguale a quello di sinistra.

    Questo sono io in questi ultimi 2 giorni:

    Come ne esco?

    Grazie in anticipo

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,042
    Ciao, in effetti non è così semplice. Si può risolvere con flexbox e un pizzico di polvere magica.

    Qui una discussione in merito trovata su stackoverflow
    https://stackoverflow.com/questions/...t-for-siblings

    In sostanza puoi applicare di base un'impostazione a colonne con flexbox e quindi usare un opportuno posizionamento assoluto per limitare l'altezza della seconda colonna.

    Riassumendo con un esempio:
    codice:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <style>
             .contenitore{
                display: flex;
                position: relative;
                width: 500px;
             }
             .colonna1{
                background: silver;
                flex: 0 0 50%;
             }
             .colonna2{
                background: orange;
                position: absolute;
                right: 0;
                width: 50%;
                height: 100%;
                overflow: auto;
             }
          </style>
       </head>
       <body>
          
          <div class="contenitore">
             <div class="colonna1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper. 
                Quisque suscipit sem non est eleifend consectetur. Suspendisse malesuada massa lorem, id pharetra arcu iaculis a. 
             </div>
             <div class="colonna2">
                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.
             </div>
          </div>
          
       </body>
    </html>
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    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!

  3. #3
    Questo sono io adesso:

    Grazie mille!

Tag per questa discussione

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