Я пытаюсь установить в <див> на определенный процент высоты в CSS, но это просто остается такого же размера, как содержимое внутри него. Когда я удалить HTML-код 5
<!DOCTYTPE в HTML> однако, это работает, в <див>
занимает всю страницу, как хотелось бы. Я хочу, чтобы страницы, чтобы проверить, так что я должен делать?
У меня есть этот CSS на в <див>
, у которого есть идентификатор страницы
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
Я пытаюсь установить div в определенный процент высоты в CSS
Процент от чего?
Чтобы установить процент высоты родительского элемента(*) должен иметь явную высоту. Это очевидно, в том, что если оставить высоту как Auto
, то блок будет взять высоту своего контента... а если сам контент имеет высоту, выраженную в процентах от родителей вы'ве сделал себе немного поймать 22. Браузер дает и просто использует высоту содержимого.
Так что родительский див должен иметь явную "высота" собственность. Несмотря на то, что высота также может быть процент, если вы хотите, что просто перемещает проблемы, поднявшись на следующий уровень.
Если вы хотите, чтобы элемент div высота в процентах от просмотра высоты, каждый предок дел, в том числе в <html-код>
и <тело>
, иметь высота: 100%
, так там цепь явный процент высоты вниз в div.
(*: или, если див позиционируется, в ‘контейнер’, который является ближайшим предком также быть установлен.)
Кроме того, все современные браузеры и IE>=9 поддержка нового подразделения Усс по отношению к высоте области просмотра (ВХ
) и ширина области просмотра (например, VW
):
div {
height:100vh;
}
Смотрите здесь подробнее.
Вам нужно установить высоту на в <html-код>
и <тело>
элементов; в противном случае они будут только быть достаточно большим, чтобы вместить содержимое. Например:
в
<!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>
в
bobince'ы ответ будет препятствовать вам знать в каких случаях и"Высота: ХХ%;" получат или выиграл't работа.
Если вы хотите создать элемент с заданным соотношением (высота: % это'собственная ширина), лучший способ, чтобы сделать это эффективно устанавливает высоту с помощью обивка-дно
. Пример для квадрата:
<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
Вы можете использовать 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>
Привет! Для того, чтобы использовать процент(%), необходимо определить % от его родительского элемента. Если вы используете тело{высота: 100%} он не будет работать, потому что его родитель имеют процент в высоту. В таком случае для того, чтобы работать, что высота вы должны добавить это в в формате HTML{высота:100%}
В другом случае, чтобы избавиться от этого определения родительской процент вы можете использовать
тело{высота:100vh}
ВХ означает высоты просмотра
Я думаю, что это поможет
Иногда, вам может потребоваться, чтобы определять высоту элемента div, например, когда всю контента меньше, чем высота экрана. Настройки все родительские элементы 100% отрежет содержание, если оно больше, чем размер экрана.
Таким образом, способ обойти это, чтобы установить мин-высота:
Продолжают пусть родительский элемент, автоматически регулировать их высоту Затем в основной див вычесть размеры пикселя header и footer div и 100vh (просмотра единиц). В CSS, что-то вроде:
мин-высота: тепловычислитель(100vh - 246px);
100vh полная длина экрана, минус окружающая ДИВС. Путем установки мин-высота, а не высота, контента больше, чем экран будет продолжать течь, вместо того, чтобы отрезать.