Вопросы Теги

Как рассчитывается высота в этом случае?

Я обращался к нему, как 

CustomerService customerService = new CustomerService();
String resolver = customerService.getCustomerData();

Что неверно и решено 

@Reference
private CustomerService customerService;
String resolver = customerService.getCustomerData();
3
задан Temani Afif 19 January 2019 в 22:07
поделиться

1 ответ

Для первого случая речь идет о выравнивании flexbox по умолчанию, которое составляет stretch . Таким образом, все элементы будут растянуты, чтобы соответствовать высоте контейнера 1 , таким образом, меню будет иметь такую ​​же высоту, что и содержимое. Другими словами, самый высокий элемент будет определять высоту, а другой будет растягиваться, чтобы соответствовать этой высоте.

Измените выравнивание, и у вас больше не будет такого поведения: 

html,
body {
  height: 100%;
}

.app {
  display: flex;
  align-items:flex-start; /*anything different from stretch*/
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}
<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

Добавив height:100% Вы теперь явно применяете высоту к элементу (растяжка больше не применяется), но это не приведет к значению auto (высоте содержимого), потому что у родительского элемента не указана высота 2 [ 1145] 

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}
<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

1 Если крестик Свойство size элемента flex вычисляется как auto, и ни одно из полей поперечной оси не имеет значения auto, элемент flex растягивается . Используемым значением является длина, необходимая , чтобы размер поперечного сечения поля поля элемента был как можно ближе к тому же размеру, что и линия , при этом соблюдая ограничения, налагаемые min-height / min-width / max-height / max-width. ref

У нас есть только одна строка в нашем случае, поэтому она такая же, как и весь контейнер. [ 1135]

2 Указывает процентную высоту. Процент рассчитывается по отношению к высоте блока, содержащего сгенерированный блок . Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как «auto» . < sup> ref

Добавьте высоту в приложение, и вы увидите, что происходит:

[ 114] 
<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

ОБНОВЛЕНИЕ

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

html,
body {
  height: 100%;
}

.app {
  display: flex;
  height: 80%;
}

.menu {
  background-color: red;
  width: 100px;
}

.container{
  flex: 1;
  background:green;
}

.test {
  height: 80%;
  border: 2px solid blue;
}
<div class="app">
<div class="menu">menu</div>
  <div class="container">
    <div class="test">percentage height is working here!! why??</div>
  </div>
</div>

Как я объяснил в предыдущем ответе , высота .container не является явно установлен, но у нас нет циклической зависимости, потому что высота .container определяется поведением растяжения, а не его содержимым, поэтому браузер может сначала установить высоту .container с помощью stretch, а затем разрешить процентную высоту .test элемент. [тысяча сто сорок две]

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

0
ответ дан Temani Afif 19 January 2019 в 22:07
поделиться