Вопросы Теги

Chrome не отображает flexbox [duplicate]

Функции стрелок , одна из новых функций стандарта ECMAScript 6 , была введена в node.js (как стабильная функция) только в версии 4.0. 0 .

Вы можете либо обновить версию node.js, либо использовать старый синтаксис, который будет выглядеть так: 

rl.question('What do you think of Node.js? ', function(answer) {
  // TODO: Log the answer in a database
  console.log('Thank you for your valuable feedback:', answer);

  rl.close();
});

(Обратите внимание, что есть один больше различий между этими синтаксисами: переменная this ведет себя по-другому. Для этого не имеет значения, но это может быть и в других.)

127
задан D. Strout 11 November 2012 в 05:03
поделиться

4 ответа

Я пытаюсь установить div на определенную процентную высоту в CSS

Процент того, что?

Чтобы установить процентную высоту, ее родительский элемент (*) должен иметь явную высоту. Это довольно очевидно, поскольку если вы оставите высоту как auto, блок будет занимать высоту своего содержимого ... но если сам контент имеет высоту, выраженную в процентах от родителя, который вы сделали вы немного поймаете 22. Браузер отбрасывает и просто использует высоту содержимого.

Итак, родительский элемент div должен иметь явное свойство height. Хотя эта высота также может быть в процентах, если вы хотите, это просто переводит проблему на следующий уровень.

Если вы хотите сделать высоту div в процентах от высоты видового экрана, каждый предок div , включая <html> и <body>, должны иметь height: 100%, поэтому существует цепочка явных процентных высот до div.

(*: или, если div находится, «содержащий блок», который также является ближайшим предком.)

В качестве альтернативы, все современные браузеры и IE> = 9 поддерживают новые единицы CSS относительно высоты окна просмотра (vh) и ширины окна просмотра ( vw): 

div {
    height:100vh; 
}

См. здесь для больше информации .

318
ответ дан Community 4 September 2018 в 06:49
поделиться

Вы можете использовать 100vw / 100vh. CSS3 дает нам относительные единицы. 100vw означает 100% ширины окна просмотра. 100vh; 100% от высоты. 

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>
4
ответ дан Ahmad Aghazadeh 4 September 2018 в 06:49
поделиться

Ответ bobince даст вам знать, в каких случаях «высота: XX%;» будет работать или не будет работать.

Если вы хотите создать элемент с установленным отношением (высота:% от его собственной ширины), лучший способ сделать это - эффективно установить высоту с помощью padding-bottom. Пример для квадрата: 

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Квадратный контейнер будет просто состоять из заполнения, и содержимое будет расширяться, чтобы заполнить контейнер. Длинная статья 2009 года на эту тему: http://alistapart.com/article/creating-intrinsic-ratios-for-video

14
ответ дан Olex Ponomarenko 4 September 2018 в 06:49
поделиться

Вам нужно также установить высоту на элементах <html> и <body>; в противном случае они будут достаточно большими, чтобы соответствовать содержимому. Например, : 

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

64
ответ дан Web_Designer 4 September 2018 в 06:49
поделиться