2016-04-20 2 views
0

Вот пример я тестирую на: Bootstrap starter themeCss% с высотой

Вы можете попробовать инспектировать элемент. Почему я не могу изменить высоту метки header или ее фоновое изображение %? Я пробовал использовать px и работает так. Например height:800px; Но если я использую height:80%;, он не будет работать. Может кто-нибудь объяснить, как это работает? Я не знаю, что я делаю неправильно.

+0

Для 'header' соблюдать высоту, данное в процентах, то его родитель должен также иметь' height', и если это так же дается в процентах, следующего родителя и т. д. Можете ли вы сказать, так ли это? ... Часто это правило заканчивается этим правилом 'html, body {margin: 0; высота: 100%; } ' – LGSon

+1

Возможное дублирование http://stackoverflow.com/questions/8262852/css-height-in-percent-not-working и http://stackoverflow.com/questions/16642866/height-percentage-not-working- in-css и http://stackoverflow.com/questions/21357238/css-height-100-percent-not-working –

+0

@LGSon Да, этого не хватало 'html, body {margin: 0; высота: 100%; } '.Tnx много помощник, спас меня много времени! – Aco

ответ

0

Когда вы даете высоту, значение% равно ее также для родителя этого элемента. Если вы хотите, чтобы заголовок имел 80% высоты экрана, вы должны вытащить его из потока DOM, установив его как position:absolute.

Так CSS может выглядеть следующим образом:

.header-image { 
position: absolute; 
height: 80%; 
} 
+0

Это неверно, так как это зависит от того, имеет ли родитель положение. – LGSon

Смежные вопросы