Не могу задать height 100%

157
25 июля 2019, 07:30

Подскажите пожалуйста, есть div, в нем есть еще один div, в этом div есть 2 div. Не могу указать значение height:100% для второго div (родительского двух дочерних div). В чем может быть проблема, подскажите пожалуйста. 

<div style="display:flex;width:100%;height:100%;"> 
   
  <div style="border-radius: 5px;width:25%;height:100%;margin-right:10px;display:block;display:inline-block;"> 
  <div style="height:60%;background:#000;border-radius: 5px;display:inline-block;width:100%;margin-bottom:8px;"> 
  </div> 
  <div style="height:38%;background:#000;border-radius: 5px;display:inline-block;width:100%;"> 
  <input type="button" value="Предчек" style="width: 90%;margin-left: 15px;margin-top: 20px;border: 2px solid #edc951;height: 40px;    background: #fff;font-family: 'Roboto Condensed', sans-serif; font-size: 20px;border-radius: 5px;"> 
  <input type="button" value="Чек" style="width: 90%;margin-left: 15px;margin-top: 20px;border: 2px solid #edc951;height: 40px;    background: #fff;font-family: 'Roboto Condensed', sans-serif; font-size: 20px;border-radius: 5px;"> 
  <input type="button" value="Удалить заказ" style="width: 90%;margin-left: 15px;margin-top: 20px;border: 2px solid #edc951;height: 40px;    background: #fff;font-family: 'Roboto Condensed', sans-serif; font-size: 20px;border-radius: 5px;"> 
 
  </div> 
  </div>

Answer 1

По умолчанию у body высота 0. А у тебя высота в процентах, процент от родителя берется...

Кстати, а у html 8px по умолчанию

body, 
html { 
  width: 100%; 
  height: 100%; 
}
<div style="display:flex;width:100%;height:100%;"> 
 
  <div style="border-radius: 5px;width:25%;height:100%;margin-right:10px;display:block;display:inline-block;"> 
    <div style="height:60%;background:#000;border-radius: 5px;display:inline-block;width:100%;margin-bottom:8px;"> 
    </div> 
    <div style="height:38%;background:#000;border-radius: 5px;display:inline-block;width:100%;"> 
      <input type="button" value="Предчек" style="width: 90%;margin-left: 15px;margin-top: 20px;border: 2px solid #edc951;height: 40px;    background: #fff;font-family: 'Roboto Condensed', sans-serif; font-size: 20px;border-radius: 5px;"> 
      <input type="button" value="Чек" style="width: 90%;margin-left: 15px;margin-top: 20px;border: 2px solid #edc951;height: 40px;    background: #fff;font-family: 'Roboto Condensed', sans-serif; font-size: 20px;border-radius: 5px;"> 
      <input type="button" value="Удалить заказ" style="width: 90%;margin-left: 15px;margin-top: 20px;border: 2px solid #edc951;height: 40px;    background: #fff;font-family: 'Roboto Condensed', sans-serif; font-size: 20px;border-radius: 5px;"> 
 
    </div> 
  </div>

Наглядный пример

console.log(getComputedStyle(document.body)['height']);

READ ALSO
Настроить PHP парсер DiDOM
HTML

Настроить PHP парсер DiDOM

Изучаю написание парсера контента, остановился на библиотеке DiDOM

 124
Как изменить цвет иконки SVG с помощью CSS?
HTML

Как изменить цвет иконки SVG с помощью CSS?

На странице есть иконки в формате SVGСами иконки нарисованы в черном цвете

 158
Математический маятник с шаром
HTML

Математический маятник с шаром

Итак, у нас есть математический маятникПомогите реализовать, чтобы после запуска программы можно было в ручную (мышкой) поднять шар и отпустить...

 122
Frontend. Как реализовать блок? [закрыт]
HTML

Frontend. Как реализовать блок? [закрыт]

Нужно чтобы при нажатии на цифры, выделенные красным, менялся контент, выделенный зеленымТолько начинаю свой путь в верстке, подскажите с помощью...

 149