Сделайте DIV или размер экрана или содержимого (в зависимости от того, что все больше)
У меня есть базовая страница с заголовком и контентом, скажем, с регистром:
<div>
<nav>
// header
</nav>
<div class = "container-index">
// form
<div>
</div>
Теперь проблема в том, что я хочу, чтобы div, окружающий форму, имел фоновое изображение, которое выравнивалось по нижней части страницы, поэтому я использую CSS следующим образом:
html,
body {
height: 100%;
}
.container-index {
background: url('../images/example.jpg') #e74a39;
background-repeat: no-repeat;
background-position: center 100%;
display: flex;
flex-flow: column;
flex-grow: 1;
}
.contaier-index.full-height {
height: 100vh;
}
Но это не работает, когда область просмотра становится меньше содержимого, вместо этого фоновое изображение заканчивается на полпути через форму, поэтому я сделал это:
$(window).on('resize scroll', function(e){
var docH = parseInt($(document).height()),
viewPortH = parseInt($(window).height());
if (docH > viewPortH) {
$('.container-index').removeClass('full-height');
} else {
$('.container-index').addClass('full-height');
}
});
$(window).trigger('resize');
Это довольно ужасный способ сделать это.
Есть ли способ сделать это в CSS?
@Vishwa, кажется, не работает
если вы можете использовать начальную загрузку, попробуйте использовать класс css с поддержкой img
@Vishwa Я использую начальную загрузку, и это не приведет к тому, что div заполнит пространство, а также это фоновое изображение, поэтому его нельзя использовать.
Ваш вопрос достаточно двусмысленный. («Но это не работает, когда область просмотра становится меньше содержимого, вместо этого фоновое изображение заканчивается на полпути через форму»); означает ли это, что вы хотите, чтобы изображение соответствовало высота, а не ширине страницы?
@Martin JS говорит сам за себя, это показывает, что я на самом деле слежу за высотой области просмотра, проблема связана с прокруткой содержимого, это работает, если содержимое никогда не прокручивается, но если на небольших экранах (мобильных) оно прокручивается, то CSS никогда работает правильно
Ответы 3
Я просто обновляю ваш код несколькими изменениями CSS и удаляю скрипт jQuery. Попробуйте это, я надеюсь, что это поможет вам. Спасибо
html,
body {
margin: 0;
min-height: 100%;
}
body {
background: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') #e74a39;
background-repeat: no-repeat;
background-position: center 100%;
background-size: cover;
}
.container-index {
display: flex;
flex-flow: column;
flex-grow: 1;
height: calc(100vh - 18px);
}<div>
<nav>
// header
</nav>
<div class = "container-index">
// form
<div>
</div>Не уверен, как это заставит div заполнить пространство, но это не так.
@Sammaye извините за недоразумение. я просто обновляю приведенный выше фрагмент кода. Спасибо
Этот сатилл делает div размером с экран минус 18 пикселей, это то, что у меня сейчас есть, без js не работает.
Это код, достаточный для создания проблемы, это действительно очень просто
Если вы хотите окружить фоновое изображение сверху вниз, вы должны применить background-image к body, а не к contaier-index div.
только что попробовал это тоже, но тело заполняет только содержимое, если вы не используете тот же метод, что и выше, поэтому вы получаете одинаковые результаты как в теле, так и в div
Все еще не работает, тело по-прежнему занимает высоту индекса контейнера на небольших экранах, что означает, что он имеет размер только одного окна просмотра.
Можете ли вы развернуть свой полный код на любом сервере или скрипке? Спасибо
Вы можете попробовать различные доступные свойства background-size: https://www.w3schools.com/cssref/css3_pr_background-size.asp. В основном, background-size: cover должен решить вашу проблему.
Тогда это может быть проблема с соотношением сторон используемого изображения. Вы могли бы, вероятно, изменить изображение и проверить.
Нет, проблема в том, что div подходит к экрану, а не к содержимому, поэтому я добавил JS, чтобы исправить это, но JS — это хак, прочитайте вопрос
В конце концов я не нашел разумного ответа CSS, поэтому единственным решением было остаться с JS для этого.
Похоже, все, что вам нужно, это background-size:cover;.
@ Мартин нет, проверь другие ответы
Вы не объяснили, как и почему не удалось выполнить background-size:cover. Мне непонятно, почему вы хотите, чтобы контент превышал размер области просмотра; если вы не пытаетесь масштабировать/масштабировать контент, и в этом случае буду будет решением CSS.
@Мартин stackoverflow.com/questions/55570645/…
использовать ширину как 100vw