Установить HTML-тег на 100% высоту
Я пытаюсь установить 100% высоты для элемента HTML. На мобильных устройствах этот div будет находиться под div .div_left, а плавающий будет очищен.
У меня есть эти div по моей теме:
<div class = "col-md-7 div_left"></div>
<div class = "col-md-5 div_right"></div>
<div class = "clearfix"></div>
Я даю им этот css: (также включен global bootstrap.css)
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px; height:100%;}
Я попробовал height:100vh;, но это не работает, когда на странице много контента, и я могу прокручивать его по вертикали.
Я также пробовал min-height:100%, но это не сработало. Я вижу правый серый фон div, но это только потому, что у него есть отступы.
Вторая попытка: Второе изображение
Очистите его до HTML и предоставьте достаточно, чтобы воспроизвести проблему. А почему бы тебе не использовать min-height:100vh?
Я написал, вот почему 100vh не работает.
Вы сказали, что height:100vh и min-height:100% не работают, нетmin-height:100vh. Уточните, пожалуйста, вопрос и что именно вы пробовали. И что именно означает "когда на странице слишком много контента, и я могу прокручивать его по вертикали"? Какое ожидаемое поведение? Будет ли дополнительный контент скрыт и недоступен? Вы ожидаете полосу прокрутки где-нибудь еще?
Я добавил изображение к посту. Вы можете видеть на нем, что у меня много контента, и я прокрутил сайт вниз. Когда я прокручиваю, серый фон заканчивается, поэтому 100vh не работает.
Ответы 2
Используйте min-height 100vh для всей строки ...
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px;}
.mvh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/vTYz8XE6cG
Рабочий стол:
Мобильный:
Нет. Я добавил изображение к сообщению со вторым именем. Вот что делает ваш код, я скопировал его в свой файл.
Нет, это не то, что делает код. Посмотрите демо. Вы не уточняете, что именно ожидается. Если это не работает, у вас есть другой CSS или HTML, который влияет на макет.
В html у div есть flex-классы. Где они добавлены в CSS?
Они являются частью Bootstrap, но не требуются для работы min-height:100vh. Вы увидите, что демо также отлично работает без них, но их можно использовать для изменения макета рабочего стола по сравнению с мобильным. Но поскольку вы не уточнили, чего ожидать, это все догадки.
Теперь я вижу, я добавил display: flex в класс mv-100. Теперь высота прекрасна, но в мобильной версии div'ы плавают, они не заходят друг под друга.
Вы используете Bootstrap 3 или Bootstrap 4?
Что ж, это хороший вопрос, потому что, когда я сжал файл css, он удалил все комментарии. Но, думаю, это версия 3.
Что ж, это объясняет проблему. Есть много других вопросов по SO, которые уже касаются этого, и, пожалуйста, убедитесь, что вы правильно помечаете вопросы в будущем.
Да, теперь я это понимаю. Но чего не хватает в 3?
Чтобы использовать height:100%;, у родительского элемента должен быть height: fixedHeight;, потому что он вам не подходит.
https://www.w3schools.com/cssref/pr_dim_height.asp
% Defines the height in percent of the containing block
Что вам нужно определить: 100% чего?
Вот дополнительная информация о vh
Сделайте div 100% высоты окна браузера
Там сказано:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Не могли бы вы уточнить свой вопрос? Покажите нам, как это выглядит сейчас и как вы хотите, например, чтобы он выглядел?