Я пытаюсь создать DIV с минимальной высотой 100%, который не работает в FireFox / IE. Работает только при использовании свойства "высота".

Хром ведет себя правильно.

<style>
    .page{
        min-height:100%;
        border:1px solid black;
    }
</style>
<html>
    <div class="page">
        With firefox / IE, this div is not stretching to take 100% of the total page height.
    </div>
</html>

< Сильный > Update :

Я понимаю, что мне нужно определить высоту тела / HTML. В этом есть смысл. Но даже с этим решением я все еще не могу использовать минимальную высоту для дочернего элемента div. Смотрите пример ниже. Ребенок div не берет 33% родительского div. (В FIREFOX и IE)

<style>
    .page{
        min-height:100%;
        border:1px solid black;
    }

    html,
    body {
        height: 100%;
    }

    .child{
        min-height:33%;
        border:1px solid black;
        display:flex;
    }

</style>
<html>
    <div class="page">
        Parent div
    <div class="child">
        With firefox / IE, this CHILD div is not stretching to take 33% of the container.
    </div>
</div>
</html>
1
David Somekh 3 Сен 2017 в 16:34

4 ответа

Лучший ответ

Вам также нужно дать html и body высоту

html, body {
  height: 100%;
}

Обновление 1, после редактирования вопроса

С этой новой разметкой также .page нужно height: 100%

html,
body {
  height: 100%;
}

.page {
  height: 100%;
  border: 1px solid black;
}

.child {
  min-height: 100%;
  border: 1px solid red;
  display: flex;
}
<div class="page">
  <div class="child">
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.
  </div>
</div>

Обновление 2, на основе комментария

Вместо этого используйте модули Flexbox и viewport vh, это будет работать намного лучше

body {
  display: flex;                 /*  IE need this for its 'min-height' bug  */
}

.page {
  min-height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
  border: 1px solid red;
}
<div class="page">
  <div class="child">
  
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
  </div>
</div>

Который также будет работать с min-height: 33%

body {
  display: flex;                 /*  IE need this for its 'min-height' bug  */
}

.page {
  min-height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.child {
  min-height: 33%;
  border: 1px solid red;
}
<div class="page">
  <div class="child">
  
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
  </div>
</div>
3
Ason 3 Сен 2017 в 14:37

Попробуйте добавить в свой код CSS это:

.page{
   min-height: 100%;
   -moz-min-height: 100%;
   border: 1px solid black;
}

Иногда браузеры не работают одинаково, и вам нужно добавить некоторые вещи. Моз для Мозилла Firefox. -webkit-styleGoesHere для Chrome. Я надеюсь, что это помогло.

-1
Oqhax 3 Сен 2017 в 13:41

Если честно, я не уверен, почему это работает даже со свойством height. Когда вы используете процентную высоту в CSS, корневой элемент (html, body) должен иметь определенную высоту.

Это потому, что проценты являются процентами родителя. Если корневой элемент не имеет определенной высоты, то из него нельзя рассчитать высоту.

Таким образом, чтобы дать корневому элементу высоту, вы устанавливаете его на 100% следующим образом:

html, body {
  height: 100%;
}
.page{
  min-height:100%;
  border:1px solid black;
}
<div class="page">
  With firefox / IE, this div is not stretching to take 100% of the total page height.
</div>
0
M. Salman Khan 3 Сен 2017 в 13:41

Свойство min-height не работает, если у прямого родителя элемента нет явного height, примененного с использованием CSS.

Из MDN

Процент рассчитывается относительно высоты содержащего блока сгенерированного блока. Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процентное значение рассматривается как 0.

Единственный способ сделать это - добавить еще один div внутри родителя div и явно установить его высоту равным 100%, затем вставить в него дочерний элемент div, после чего min-height Работа

<html>
  <body>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
    .page{
        min-height:100%;
        border:1px solid black;
    }
    .wrapper {
      height: 100%;
    }
    .child {
      min-height: 33%;
      background: yellow;
    }
  </style>
    <div class="page">
        <div class="wrapper">
          <div class="child"></div>
        </div>
    </div>
  </body>
</html>
2
Ahmad Alfy 3 Сен 2017 в 14:41