Дитина всередині батька з мінімальним зростом: 100% не успадковує зріст

Я знайшов спосіб зробити контейнер div, щоб зайняти хоча б повну висоту сторінки, встановивши min-height: 100%;. Однак, коли я додаю вкладений div і встановлюю height: 100%;, він не розтягується до висоти контейнера. Чи є спосіб це виправити?

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>

Це повідомлення про помилку webkit (chrome / safari); діти батьків із мінімальним зростом не можуть успадкувати властивість висоти: https://bugs.webkit.org/show_bug.cgi?id=26559

Мабуть, також впливає Firefox (наразі не можна перевірити IE)

Можливе вирішення:

• Додати позицію: відносно #containment
• додати позицію: абсолютна до # містити-тінь-зліва

Помилка не відображається, коли внутрішній елемент має абсолютне позиціонування.

Дивіться http://jsfiddle.net/xrebB/

Редагувати 10 квітня 2014 року

Оскільки я зараз працюю над проектом, для якого мені справді потрібні батьківські контейнери min-heightта дочірні елементи, що успадковують висоту контейнера, я провів ще кілька досліджень.

По-перше: я вже не впевнений, чи справді поведінка браузера насправді є помилкою. Специфікації CSS2.1 кажуть:

Відсоток обчислюється відносно висоти згенерованого блоку, що містить блок. Якщо висота блоку, що містить, не вказана явно (тобто це залежить від висоти вмісту), і цей елемент не є абсолютно розташованим, значення обчислюється як "auto".

Якщо я поміщаю на контейнер мінімальну висоту, я не вказую прямо його висоту - тому мій елемент повинен отримати autoвисоту. І саме це робить Webkit - і всі інші браузери.

По-друге, вирішення я знайшов:

Якщо я встановлюю мій контейнер елемент display:tableз height:inheritвін діє точно так же, як якщо б я дати йомуmin-height 100%. І що ще важливіше - якщо я встановити дочірній елемент, display:table-cellвін ідеально успадкує висоту елемента контейнера - будь то 100% або більше.

Повний CSS:

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

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

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

Розмітка:

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

Дивіться http://jsfiddle.net/xrebB/54/ .

Додати height: 1pxв батьківський контейнер. Працює в Chrome, FF, Safari.

Я думав, що поділюсь цим, оскільки не бачив цього ніде, і це те, що я використовував для виправлення свого рішення.

РІШЕННЯ :min-height: inherit;

У мене був батько із заданим мінімальним зростом, і мені потрібна була дитина, щоб він був такого зросту.

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

Таким чином, дитина зараз виконує роль 100% мінімального зросту.

Я сподіваюся, що деякі люди вважають це корисним :)

Це було додано у коментарі @jackocnr, але я пропустив це. Для сучасних браузерів я вважаю, що це найкращий підхід.

Це змушує внутрішній елемент заповнити весь контейнер, якщо він занадто малий, але збільшує висоту контейнера, якщо він занадто великий.

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

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

Рішення Kushagra Gour працює (принаймні, в Chrome і IE) і вирішує оригінальну проблему без використання display: table;та display: table-cell;. Дивіться планкер: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Якщо встановити min-height: 100%; height: 1px;зовнішній дзвінок, то його фактична висота повинна бути не менше 100%, як потрібно. Це також дозволяє внутрішньому діву правильно успадкувати висоту.

Окрім існуючих відповідей, є також оглядові одиниці vhдля перегляду . Простий фрагмент нижче. Звичайно, він може використовуватися разом із ними calc(), наприклад, min-height: calc(100vh - 200px);коли заголовок сторінки та колонтитули мають 200pxразом висоту.

body {
  margin: 0;
}

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

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

Я не вірю, що це помилка з браузерами. Усі поводяться однаково - тобто, коли ви припините вказувати явні висоти, мінімальна висота - це в основному "останній крок".

Здається, саме так пропонує специфікація CSS 2.1: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Відсоток обчислюється відносно висоти згенерованого блоку, що містить блок. Якщо висота блоку, що містить, не вказана явно (тобто це залежить від висоти вмісту), і цей елемент не є абсолютно розташованим, значення обчислюється як "auto".

Тому, оскільки у min-heightбатьків немає явного heightнабору властивостей, він за замовчуванням встановлює автоматичне.

Існує кілька способів цього, можливо, використовуючи display: table-cellновіші стилі, такі як flexbox, якщо це можливо для браузерів цільової аудиторії. Ви також можете підривати це в певних ситуаціях, використовуючи властивості topта bottomвластивості на абсолютно розташованому внутрішньому елементі, що дає 100% висоту, не вказуючи цього.

Хоча display: flex;тут було запропоновано, подумайте про використання display: grid;зараз, коли він широко підтримується . За замовчуванням єдина дочірня сітка повністю заповнить її батьків.

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

Для googlers:

Цей jquery-вирішення змушує #containment автоматично отримувати висоту (за, висотою: авто), а потім отримує фактичну висоту, призначену як значення пікселя.

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

Найкращий спосіб цього досягти - це використовувати display: flex;. Однак ви можете зіткнутися з проблемою, намагаючись підтримати IE11. За даними https://caniuse.com за допомогою flexbox:

IE 11 не вертикально вирівнює елементи, коли використовується мінімальна висота

Сумісне рішення для Internet Explorer

Рішення полягає у використанні display: table;як для батьків, так і display: table-row;для дитини як із height: 100%;заміною min-height: 100%;.

Велика частина рішень , перерахованих тут використовують display: table, table-rowі / або table-cell, але вони не копіюють таку ж поведінку , як min-height: 100%;, що:

• Спадковуйте обчислену висоту батьківського (на відміну від успадкування його) height властивості);
• Дозволити зріст батька перевищити його min-height;

Під час використання цього рішення поведінка однакова, і властивість min-heightне потрібна, що дозволяє обійти помилку.

Пояснення

Причина, чому це працює, полягає в тому, що, на відміну від більшості елементів, елементи, які використовують display: tableі table-rowзавжди будуть настільки ж високими, як і їх зміст. Це змушує їхню heightвласність вести себе аналогічно min-height.

Рішення в дії

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>

Ще одне рішення JS, яке легко і може бути використане для уникнення непростого CSS-рішення або додаткового рішення розмітки / хакі.

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

Кутова директива:

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

Для використання таким чином:

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

Зазвичай це працює для мене:

.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

Просто тримати цю тему повно, я знайшов рішення не досліджував тут використовуючи Фіксовану позицію.

Ніякого переливу

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>

З Переповненням

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>

Це те, що для мене працює з ростом у відсотках, а батьки все ще зростають відповідно до зросту дітей. Відмінно працює у Firefox, Chrome та Safari.

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

.child {
  min-height: 100vh;
}

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

після спроб для наших! chrome розуміє, що я хочу, щоб дочірній елемент був на 100% висотою, коли я встановлював значення відображення на вбудований блок. btw налаштування поплавця призведе до цього.

display:inline-block

оновлення

це не працює. рішення полягає в тому, щоб отримати зсув батьківського вузла і використовувати його на і на сторінці за допомогою JavaScript.

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