Dziecko wewnątrz rodzica o minimalnym wzroście: 100% nie dziedziczy wzrostu

Znalazłem sposób, aby kontener div zajmował co najmniej pełną wysokość strony, ustawiając min-height: 100%;. Jednak gdy dodam zagnieżdżony element div i ustawię height: 100%;go, nie rozciąga się on do wysokości kontenera. Czy jest sposób, aby to naprawić?

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

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

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

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

To jest zgłoszony błąd webkita (chrome / safari). Dzieci rodziców z minimalnym wzrostem nie mogą dziedziczyć właściwości height: https://bugs.webkit.org/show_bug.cgi?id=26559

Najwyraźniej dotyczy to również Firefoksa (w tej chwili nie można testować w IE)

Możliwe obejście:

• dodaj pozycję: względem #containment
• dodaj pozycję: bezwzględna do # zawierającego cień-lewy

Błąd nie pojawia się, gdy element wewnętrzny ma pozycjonowanie bezwzględne.

Zobacz http://jsfiddle.net/xrebB/

Edytuj 10 kwietnia 2014 r

Ponieważ obecnie pracuję nad projektem, dla którego naprawdę potrzebuję kontenerów nadrzędnych min-heighti elementów podrzędnych dziedziczących wysokość kontenera, przeprowadziłem dalsze badania.

Po pierwsze: nie jestem już taki pewien, czy obecne zachowanie przeglądarki naprawdę jest błędem. Specyfikacje CSS2.1 mówią:

Procent jest obliczany w odniesieniu do wysokości bloku zawierającego wygenerowane pudełko. Jeśli wysokość bloku zawierającego nie jest określona jawnie (tj. Zależy to od wysokości zawartości), a ten element nie jest pozycjonowany bezwzględnie, wartość jest obliczana jako „auto”.

Jeśli umieszczę minimalną wysokość w moim kontenerze, nie określam jawnie jego wysokości - więc mój element powinien uzyskać autowysokość. I to jest dokładnie to, co robi Webkit - i wszystkie inne przeglądarki.

Po drugie, obejście, które znalazłem:

Jeśli ustawię mój element kontenera na display:tablewith height:inherit, działa dokładnie tak samo, jakbym dał mu min-height100%. I - co ważniejsze - jeśli ustawię na display:table-cellto element podrzędny , doskonale odziedziczy wysokość elementu kontenera - czy to 100%, czy więcej.

Pełny CSS:

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

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

Znaczniki:

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

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

Dodaj height: 1pxdo kontenera nadrzędnego. Działa w Chrome, FF, Safari.

Pomyślałem, że podzielę się tym, ponieważ nigdzie tego nie widziałem i właśnie to naprawiłem moje rozwiązanie.

ROZWIĄZANIE :min-height: inherit;

Miałem rodzica z określonym minimalnym wzrostem i potrzebowałem dziecka, które również miało ten wzrost.

.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;
}

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

W ten sposób dziecko zachowuje się teraz jako wysokość 100% minimalnego wzrostu.

Mam nadzieję, że niektórzy uznają to za przydatne :)

Zostało to dodane w komentarzu przez @jackocnr, ale przegapiłem to. Myślę, że w przypadku nowoczesnych przeglądarek jest to najlepsze podejście.

Sprawia, że ​​element wewnętrzny wypełnia cały kontener, jeśli jest za mały, ale zwiększa wysokość kontenera, jeśli jest zbyt duży.

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Rozwiązanie Kushagra Gour działa (przynajmniej w Chrome i IE) i rozwiązuje pierwotny problem bez konieczności używania display: table;i display: table-cell;. Zobacz plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Ustawienie min-height: 100%; height: 1px;na zewnętrznym divie powoduje, że jego rzeczywista wysokość wynosi co najmniej 100%, zgodnie z wymaganiami. Pozwala również wewnętrznemu elementowi div na prawidłowe dziedziczenie wysokości.

Oprócz istniejących odpowiedzi dostępne są również jednostki rzutni vh. Prosty fragment poniżej. Oczywiście można go również używać razem calc(), np. min-height: calc(100vh - 200px);Gdy nagłówek strony i stopka mają 200pxrazem wysokość.

body {
  margin: 0;
}

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

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

Nie wierzę, że to błąd przeglądarek. Wszystkie zachowują się w ten sam sposób - to znaczy, gdy przestaniesz określać wyraźne wysokości, min-height jest w zasadzie „ostatnim krokiem”.

Wydaje się, że dokładnie tak sugeruje specyfikacja CSS 2.1: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Procent jest obliczany w odniesieniu do wysokości bloku zawierającego wygenerowane pudełko. Jeśli wysokość bloku zawierającego nie jest określona jawnie (tj. Zależy to od wysokości zawartości), a ten element nie jest pozycjonowany bezwzględnie, wartość jest obliczana jako „auto”.

Dlatego, ponieważ element min-heightnadrzędny nie ma wyraźnego heightzestawu właściwości, domyślnie jest ustawiony na auto.

Istnieje kilka sposobów obejścia tego, prawdopodobnie przy użyciu display: table-celllub nowszych stylów, takich jak flexbox, jeśli jest to możliwe w przeglądarkach docelowych odbiorców. W pewnych sytuacjach można to również odwrócić, używając właściwości topi bottomna bezwzględnie pozycjonowanym elemencie wewnętrznym, który daje 100% wysokości bez określania tego.

Chociaż display: flex;zostało to tutaj zasugerowane, rozważ użycie display: grid;teraz, gdy jest szeroko obsługiwany . Domyślnie jedyny element podrzędny siatki całkowicie wypełnia element nadrzędny.

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;
}

Dla pracowników Google:

To obejście jquery powoduje, że #containment automatycznie pobiera wysokość (przez, height: auto), a następnie pobiera rzeczywistą wysokość przypisaną jako wartość w pikselach.

<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>

Obecnie najlepszym sposobem na osiągnięcie tego jest użycie display: flex;. Jednak możesz napotkać problem podczas próby obsługi IE11. Według https://caniuse.com przy użyciu flexbox:

IE 11 nie wyrównuje poprawnie elementów w pionie, gdy używana jest minimalna wysokość

Rozwiązanie zgodne z przeglądarką Internet Explorer

Rozwiązaniem jest użycie display: table;na rodzica i display: table-row;na dziecku zarówno height: 100%;jako zamiennik min-height: 100%;.

Większość rozwiązań Wymienione tu użyć display: table, table-rowi / lub table-cell, ale nie powielać to samo zachowanie jak min-height: 100%;, który jest:

• Dziedzicz obliczoną wysokość rodzica (w przeciwieństwie do dziedziczenia jego heightwłasności);
• Pozwól, aby wzrost rodzica przekroczył jego min-height;

Podczas korzystania z tego rozwiązania zachowanie jest takie samo, a właściwość min-heightnie jest potrzebna, co pozwala ominąć błąd.

Wyjaśnienie

Powodem, dla którego to działa, jest to, że w przeciwieństwie do większości elementów, elementy używające display: tablei table-rowzawsze będą tak wysokie jak ich zawartość. To sprawia, że ​​ich heightwłasność zachowuje się podobnie do min-height.

Rozwiązanie w akcji

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;
}

<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>

Kolejne rozwiązanie JS, które jest łatwe i można go użyć, aby uniknąć niełatwego rozwiązania CSS lub dodatkowego znacznika / hacky.

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');
}

Dyrektywa Angular:

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');
    }
  };
}]);

Do użycia w ten sposób:

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

To zwykle działa dla mnie:

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

 Run code snippetHide results
Expand snippet

Aby ten temat był kompletny, znalazłem rozwiązanie, które nie zostało zbadane tutaj, używając opcji Fixed position.

Brak przepełnienia

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;
}

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

Z przelewem

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;
}

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

To właśnie działa w przypadku mnie, gdy wzrost oparty jest na procentach, a rodzic wciąż rośnie w zależności od wzrostu dziecka. Działa dobrze w przeglądarkach Firefox, Chrome i Safari.

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

.child {
  min-height: 100vh;
}

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

po wypróbowaniu naszego! chrome rozumie, że chcę, aby element podrzędny miał 100% wysokości, gdy ustawię wartość wyświetlania na blok inline. btw ustawienie pływaka spowoduje to.

display:inline-block

aktualizacja

to nie działa. rozwiązaniem jest pobranie offsetheight węzła nadrzędnego i użycie go na końcu strony za pomocą javascript.

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