Процентная высота HTML 5 / CSS

Я пытаюсь установить

на определенный процентный рост в CSS, но он просто остается того же размера, что и содержимое внутри него. Однако, когда я HTML 5 , он работает,

занимает всю страницу по желанию. Я хочу, чтобы страница проверялась, так что мне делать?

У меня есть этот CSS на

, который имеет идентификатор page :

 #page { padding: 10px; background-color: white; height: 90% !important; } 

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

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

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

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

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

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

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

 div { height:100vh; } 

См. Здесь для получения дополнительной информации .

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

 < !DOCTYPE html> Example of 100% width and height  

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

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

 
.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

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