Bambino all’interno di un genitore con min-height: 100% non eredita altezza

Ho trovato un modo per fare un div contenitore di occupare almeno tutta l’altezza della pagina, impostando min-height: 100%;. Tuttavia, quando ho aggiunto un div nidificati e impostare height: 100%;, non tratto del contenitore di altezza. C’è un modo per risolvere il problema?

CSS:

html, body {
  height: 100%;
  margin: 0;
}

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

HTML:

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>
  • Moderna soluzione: dare al contenitore display:flex e flex-direction:column e dare al bambino flex:1.
  • Che non funziona in nessun IE a causa di un bug, è stato fissato in Edge.
InformationsquelleAutor lamefun | 2011-12-11

 

14 Replies
  1. 132

    Questo è riportato un webkit (chrome/safari) bug, i figli di genitori con min-height non può ereditare la proprietà height: https://bugs.webkit.org/show_bug.cgi?id=26559

    A quanto pare Firefox è influenzato troppo (non di prova in IE al momento)

    Possibile soluzione:

    • aggiungere position:relative a #contenimento
    • aggiungere position:absolute a #contenimento-ombra-sinistra

    Il bug non mostra quando l’elemento interiore ha un posizionamento assoluto.

    Vedere http://jsfiddle.net/xrebB/

    Modifica su aprile 10, 2014

    Poiché attualmente sto lavorando su un progetto per il quale ho davvero bisogno di contenitori padre con min-height, e gli elementi figlio che eredita l’altezza del contenitore, ho fatto un po ‘ più di ricerca.

    Primo: io non sono così sicuro di più se il browser attuale comportamento è davvero un bug. CSS2.1 specifiche dicono:

    La percentuale è calcolata rispetto all’altezza del
    generata casella di blocco che contiene. Se l’altezza del contenitore
    il blocco non è specificato in modo esplicito (cioè, dipende dal contenuto
    altezza), e questo elemento non è assolutamente posizionato, il valore
    calcola ‘auto’.

    Se ho messo un min-height sul mio contenitore, io non sono esplicitamente specificando la sua altezza, quindi il mio elemento dovrebbe ottenere un auto altezza. Ed è esattamente quello che Webkit – e tutti gli altri browser – do.

    Secondo, la soluzione che ho trovato:

    Se ho impostato il mio elemento contenitore per display:table con height:inherit funziona esattamente nello stesso modo come se io vorrei fare un min-height del 100%. E – ancora più importante – se ho impostato il bambino elemento display:table-cell perfettamente ereditare l’altezza del contenitore elemento – se è al 100% o più.

    Pieno CSS:

    html, body {
      height: 100%;
      margin: 0;
    }
    
    #container {
      background: green;
      display: table;
      height: inherit;
      width: 100%;
    }
    
    #content {
      background: red;
      display: table-cell;
    }

    Markup:

    <div id="container">
      <div id="content">
          <p>content</p>
      </div>
    </div>

    Vedere http://jsfiddle.net/xrebB/54/.

    • L’uomo, questo non è ancora risolto :S
    • Sì, non-vedo che ci sono un paio di patch, ma come di Chrome 29, ancora non mostra il comportamento atteso. Tuttavia, non funziona in Firefox 23, vale a dire 10, Safari 5, o di Opera 12 sia. Almeno tutti i browser d’accordo…
    • Alla data, ancora non funziona. Ho dovuto impostare il height attributo.
    • Anche se questa è una buona soluzione, mi piace di più l’uno dall’ @Kushagra Gour, perché non alterare il layout (non voglio usare la tabella mostra…)
    • La parte peggiore è che, anche quando si ottiene risolto, dal momento che le persone ancora in grado di disporre di un browser con il “difetto” abbiamo ancora bisogno di un programma intorno ad esso e agire come non è mai stato risolto… Bisogna amare le dipendenze…
    • 2015 e ancora non risolto.
    • La sua una strana lettura della specifica concludere che min/max altezza non è esplicita…e per strano intendo sbagliato. Leggere tutto il paragrafo, nel contesto, questa interpretazione non è corretta. Per chiarire il motivo per cui, “l’altezza del blocco contenente,” in un contesto, è semanticamente diverso, allora la proprietà di altezza. Se, invece, il fraseggio è stato “altezza proprietà del blocco contenente” quindi la Tua interpretazione avrebbe senso (e che sia un bug di spec).
    • questo è stato bugging me per anni. devo fare in javascript e assoluto/elementi fissi superare. molto fastidioso
    • 2018 e questo ancora non è stato risolto. Quello strano comportamento.
    • position: absolute; min-height: inherit; min-width: inherit; Questo ha funzionato per me
    • Nota, come la modifica (e gli insetti.webkit link) menziona, questo non è davvero un bug — se un genitore è stato min-height: 20px, ma un bambino è stato height: 120%, che avrebbero influenzato il genitore di altezza, che possa influenzare l’altezza del bambino… Quando i genitori altezza è inconoscibile, i bambini possono utilizzare per il dimensionamento.
    • E ‘ il 2019. Abbiamo perso 10 anni di anniversario di questo bug. Il flex soluzione ha funzionato per me stackoverflow.com/questions/8468066/…

  2. 158

    Aggiungere height: 1px per contenitore padre. Funziona in Chrome, FF, Safari.

    • Facendo questo non risolve il problema, effettivamente si sta sovrascrivendo il min-height:100% impostazione che non serve a niente che non potrebbe essere raggiunto con height:100%, che non è quello che l’OP vuole
    • height: 1px dovrebbe essere genitore e min-height: 100% sul bambino. Come si può ignorare un altro?
    • si prega di demo, il genitore #contenimento attualmente ha un min-height di 100px, l’aggiunta di altezza 1px per questo avrà la precedenza il min-height semplicemente non funzionerà, prendendo il min-height e utilizzo height:1px non funzionano
    • l’aggiunta di height: 1px; non sostituirà il min-height. Piuttosto il contrario. Questa è la soluzione migliore qui… demo: jsbin.com/mosaboyo/1/edit
    • Vedere questo perché height: 1px; funziona stackoverflow.com/questions/2341821/height100-vs-min-height100
    • Il problema con questo, che credo styler provato a ottenere, è che questo non trattenere l’espansione tratto di min-height. E. g., se c’è abbastanza di testo sarà di overflow. Vedere jsbin.com/vuyapitizo/1
    • Questo è vero @BrianFunt! Purtroppo, questo è esattamente il comportamento che mi richiedono :S…100% altezza vuota bambino div, ma che cresce anche quando lo schermo si restringe e il contenuto overflow..c’è un bel modo per fare che?
    • ptriek metodo sembra essere la migliore, anche se non è piacevole
    • Questo funziona anche se ho impostato l’altezza : 0 🙂 credo che il controllo è min-height è evitato se height : auto. In tutti gli altri casi min-height è applicato.
    • Credo che il genitore altezza è calcolata solo se ci aggiungi un esplicito height, ma l’altezza effettiva è quella che da il min-height
    • Citando Paolo commento di seguito: “Ma non permette il contenitore, per crescere, che sconfigge lo scopo di usando il min-height.” stackoverflow.com/questions/8468066/…
    • Questo funziona solo alcune volte, ma può causare altri problemi altrove.

  3. 84

    ho pensato di condividere questo, come io non vedere questo ovunque, ed è quello che ho usato per fissare la mia soluzione.

    SOLUZIONE: min-height: inherit;

    Ho avuto un genitore con una determinata altezza min e ho bisogno di un bambino per essere tale altezza.

    CSS:

    .parent {
      min-height: 300px;
      background-color: rgba(255,255,0,0.5); //yellow
    }
    
    .child {
      min-height: inherit;
      background-color: rgba(0,255,0,0.5); //blue
    }
    
    p {
      padding: 20px;
      color: red;
      font-family: sans-serif;
      font-weight: bold;
      text-align: center;
    }

    HTML:

    <div class="parent">
      <div class="child">
        <p>Yellow + Blue = Green :)</p>
      </div>
    </div>

    Questo modo il bambino agisce ora come altezza 100% del min-height.

    Spero che alcune persone trovano utile 🙂

    • Parzialmente funziona, ma solo il figlio eredita il min-height. Quando i genitori altezza è più grande, il bambino non si espanderà.
    • Funziona in situazioni in cui l’elemento principale non ridimensiona.
    • Hai salvato la mia vita
    • Funziona solo quando il min-height è assoluto, non in percentuale, AFAICS.
    • Funziona bene anche se il genitore ha un vh valore! GRAZIE!
    • Non adatto per ogni situazione, ma molto utile a volte. Grazie!
    • Questo dovrebbe essere accettata come soluzione ora. Funziona anche con height: inherit l’elemento figlio. Non prova con le percentuali, ma in un sacco di situazioni che si possono tradurre facilmente % unità di vh.

  4. 8

    Kushagra Gour soluzione non funziona (almeno con Chrome e IE) e risolve il problema originale, senza dover utilizzare display: table; e display: table-cell;. Vedere plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

    Impostazione min-height: 100%; height: 1px; il div esterno, provoca la sua altezza di almeno di 100%, come richiesto. Permette anche l’interno div correttamente ereditare l’altezza.

    • Ma non permette il contenitore, per crescere, che sconfigge lo scopo di usando il min-height.
    • Ho bisogno di un wrapper per riempire il genitore min-height e altezza. Che cosa ha funzionato per me era l’impostazione di min-altezza di ereditare e l’altezza al 100%.
  5. 8

    Questo è stato aggiunto in un commento di @jackocnr, ma ho perso. Per i browser moderni penso che questo sia l’approccio migliore.

    Rende l’elemento interiore riempire tutto il contenitore, se è troppo piccolo, ma si espande il contenitore di altezza, se è troppo grande.

    #containment {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    #containment-shadow-left {
      flex: 1;
    }
    • questo è il migliore dal flexbox è ampiamente compatibile.
  6. 4

    In aggiunta all’esistente risposte, c’è anche viewport unità vh per l’uso. Semplice frammento di seguito. Ovviamente può essere usato insieme con calc() così, ad esempio, min-height: calc(100vh - 200px); quando la pagina di intestazione e piè di pagina sono 200px altezza.

    CSS:

    body {
      margin: 0;
    }
    
    .child {
      min-height: 100vh;
      background: pink;
    }

    HTML:

    <div class="parent">
      <div class="child"></div>
    </div>

  7. 3

    Io non credo che questo sia un bug dei browser. Tutti si comportano allo stesso modo, una volta che si smette specificando esplicito heights, min-height è fondamentalmente un “ultimo passaggio”.

    Sembra essere esattamente come il CSS 2.1 spec suggerisce:
    http://www.w3.org/TR/CSS2/visudet.html#the-height-property

    La percentuale è calcolata rispetto all’altezza del generati casella di blocco che contiene. Se l’altezza del blocco contenente non è specificato in modo esplicito (cioè, dipende dal contenuto di altezza), e questo elemento non è assolutamente posizionato, il valore calcola per ‘auto’.

    Dunque, come min-height genitori non hanno un esplicito height insieme di proprietà, non è automatico.

    Ci sono alcuni modi per aggirare questo, eventualmente utilizzando display: table-cell, o stili più recenti come flexbox, se questo è possibile per il vostro pubblico mirato del browser. È inoltre possibile sovvertire questo in certe situazioni, utilizzando il top e bottom proprietà su un posizionamento assoluto, elemento interiore, che ti dà il 100% di altezza senza specificare in modo.

  8. 2

    Googler:

    Questo jquery-soluzione fa #contenimento ottenere un’altezza automaticamente (da, altezza: auto), quindi riceve l’altezza effettiva assegnato un valore in pixel.

    <script type="text/javascript">
    <!--
        $(function () {
    
            //workaround for webkit-bug http://stackoverflow.com/a/8468131/348841
    
            var rz = function () {
                $('#containment')
                .css('height', 'auto')
                .css('height', $('#containment').height() + 'px');
            };
    
            $(window).resize(function () {
                rz();
            });
    
            rz();
    
        })
    -->
    </script>
    • Bella soluzione, si può semplicemente impostare il min-altezza dell’elemento, senza impostare l’altezza e ‘automatico’. Ha funzionato per me.
  9. 2

    Il modo migliore per raggiungere questo obiettivo oggi è quello di utilizzare display: flex;. Tuttavia si potrebbe incorrere in un problema quando si cerca di supporto IE11. Secondo https://caniuse.com utilizzando flexbox :

    IE 11 non allineare verticalmente gli elementi correttamente quando il min-height è utilizzato

    Compatibili con Internet Explorer soluzione

    La soluzione è usare display: table; su padre e display: table-row; sul bambino sia con height: 100%; come un sostituto per min-height: 100%;.

    La maggior parte delle soluzioni elencate di seguito utilizzare display: table, table-row e/o table-cell, ma di non replicare lo stesso comportamento min-height: 100%;, che è:

    • Ereditare calcolato l’altezza del genitore (in contrapposizione a ereditare la sua height proprietà);
    • Permettere al padre di altezza, a superare l’ min-height;

    Durante l’utilizzo di questa soluzione, il comportamento è lo stesso e la proprietà min-height non è necessario che permette di aggirare il bug.

    Spiegazione

    Il motivo per cui funziona è perché, a differenza della maggior parte degli elementi, utilizzando elementi display: table e table-row sempre essere alto come il loro contenuto. Questo rende la loro height proprietà si comportano allo stesso modo per min-height.

    Soluzione in azione

    CSS:

    html, body {
      height: 100px;
      margin: 0;
    }
    
    #containment {
      display: table;
      height: 100%;
      background: pink;
      width: 100%;
    }
    
    #containment-shadow-left {
      display: table-row;
      height: 100%;
      background: aqua;
    }
    
    #content {
      padding: 15px;
    }
    
    #demo {
      display: none;
      background-color: red;
      height: 200px;
    }
    
    #demo-checkbox:checked ~ #demo {
      display: block;
    }

    HTML:

    <div id="containment">
      <div id="containment-shadow-left">
        <div id="content">
          <input id="demo-checkbox" type="checkbox">
          <label for="demo-checkbox">Click here for overflow demo</label>
          <div id="demo">This is taller than #containment</div>
        </div>
      </div>
    </div>

  10. 1

    Un altro JS soluzione, che è facile e può essere utilizzato per evitare una non facile CSS o extra markup /hacky soluzione.

    function minHeight(elm, percent) {
      var windowHeight = isNaN(window.innerHeight) ? 
                         window.clientHeight : window.innerHeight;
      var height = windowHeight * percent / 100;
      elm.style.minHeight = height + 'px';
    }

    W/jQuery :

    function minHeight($elm, percent) {
      var windowHeight = $(window).height();
      var height = windowHeight * percent / 100;
      $elm.css('min-height', height + 'px');
    }

    Angolare direttiva :

    myModule.directive('minHeight', ['$window', function($window) {
      return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
          var windowHeight = isNaN($window.innerHeight) ? 
                   $window.clientHeight : $window.innerHeight;
          var height = windowHeight * attrs.minHeight / 100;
          elm.css('min-height', height + 'px');
        }
      };
    }]);

    Per essere utilizzati come questo :

    <div>
      <!-- height auto here -->
      <div min-height="100">
        <!-- This guy is at least 100% of window height but grows if needed -->
      </div>
    </div>
    • Grazie per la direttiva soluzione. Che è quello che ho finito per usare, ma non ho voglia finestra altezza min; piuttosto ho voluto ereditare il min-height del padre, così ho modificato il codice in questo modo: var height = elm.parent()[0].offsetHeight;
  11. 0

    Anche se display: flex; è stato suggerito qui, considerare l’utilizzo di display: grid; ora che è ampiamente supportato. Per impostazione predefinita, l’unico figlio di una griglia sarà interamente riempire il suo genitore.

    CSS:

    html, body {
      height: 100%;
      margin: 0;
      padding: 0; /* Don't forget Safari */
    }
    
    #containment {
      display: grid;
      min-height: 100%;
      background: pink;
    }
    
    #containment-shadow-left {
      background: aqua;
    }

  12. 0

    Solo per mantenere questo soggetto completo, ho trovato una soluzione non esplorato Qui uso in posizione Fissa.

    No Overflow

    CSS:

    html, body, .wrapper, .parent, .child {
      position: fixed;
      top: 0; 
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 0;
      height: 100%;
    }
    
    .child {
      overflow: auto;
      background: gray;
    }
    
    .height-50 {
      height: 50%;
      width: 5em;
      margin: 10px auto;
      background: cyan;
    }

    HTML:

    <div class="wrapper">
      <div class="parent">
        <div class="child">
          
          <div class="height-50"></div>
          
        </div>
      </div>
    </div>

    Con Overflow

    CSS:

    html, body, .wrapper, .parent, .child {
      position: fixed;
      top: 0; 
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 0;
      height: 100%;
    }
    
    .child {
      overflow: auto;
      background: gray;
    }
    
    .height-150 {
      height: 150%;
      width: 5em;
      margin: 10px auto;
      background: cyan;
    }

    HTML:

    <div class="wrapper">
      <div class="parent">
        <div class="child">
          
          <div class="height-150"></div>
          
        </div>
      </div>
    </div>

  13. -1

    Questo è ciò che funziona per me, con una percentuale basata su altezza e il padre ancora in crescita per i bambini di altezza.
    Funziona bene in Firefox, Chrome e Safari.

    CSS:

    .parent {
      position: relative;
      min-height: 100%;
    }
    
    .child {
      min-height: 100vh;
    }

    HTML:

    <div class="parent">
        <div class="child"></div>
      </div>

  14. -3

    dopo aver provato per la nostra! chrome capisce che voglio elemento figlio al 100% di altezza, quando ho impostato il valore del display inline block. btw impostazione galleggiante causando.

    display:inline-block

    aggiornamento

    questo non funziona. la soluzione è quello di ottenere il parentnode offsetheight e l’uso e la pagina con javascript.

    <script>
        SomedivElement = document.getElementById('mydiv');
        SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
    </script>

Lascia un commento