высота кнопки в процентах делает ее плоской [дубликат]

Оператор нулевого распространения возвращает значение. И поскольку у вас должна быть переменная с левой стороны задания, а не значение, вы не можете использовать ее таким образом.

Конечно, вы могли бы сделать вещи короче, используя оператор tenary, но что, с другой стороны, не очень помогает аспекту читаемости.

Комментарий Иоахима Исакссона по вашему вопросу показывает другой подход, который должен работать.

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

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

315
ответ дан Community 18 August 2018 в 07:03
поделиться
  • 1
    Хотя не работает для ориентации на портретный экран stackoverflow.com/questions/23198237/… – Dchris 21 April 2014 в 14:18
  • 2
    Пожалуйста, см. Ответ Брайана Кэмпбелла ниже. Я считаю, что это правильное решение. Этот ответ кажется обходным путем и не затрагивает актуальную проблему. – MG Developer 30 April 2017 в 16:12

Вы можете использовать 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 18 August 2018 в 07:03
поделиться

Ответ 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 18 August 2018 в 07:03
поделиться
  • 1
    удивительное спасибо! – zaw 16 February 2016 в 07:55
  • 2
    это отлично работает. Он также быстро чувствует себя в браузере, изменяя размер страницы с более чем 100 элементами. благодаря! – dean grande 26 April 2018 в 12:16

Вам нужно также установить высоту на элементах <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 18 August 2018 в 07:03
поделиться
  • 1
    ¬_¬ Мне потребовалось 20 минут, чтобы понять, что мне нужно было установить высоту документа на 100%. Я читал это слишком поздно, но это очень блестяще. <Я> вздыхать – omninonsense 30 December 2011 в 16:41
  • 2
    Это нужно проголосовать как ответ, поскольку он дает решение для многих людей, приезжающих сюда, задаваясь вопросом, что можно сделать, большинство из них смотрят первый ответ и считают его невозможным и избегают думать о том, существует ли какой-либо другой метод, не читая этого – Sachin Divakar 4 September 2015 в 19:04
  • 3
    Я согласен, что это правильный ответ, высота не работает, потому что должен быть установлен родительский элемент, который является телом и html. Этот ответ должен быть принятым ответом. – MG Developer 30 April 2017 в 16:10
Другие вопросы по тегам:

Похожие вопросы: