Проблема перекрытия содержимого с адаптивным div фонового изображения и фиксированной навигацией
У меня есть фиксированная навигация, а под ней фоновое изображение, содержащееся внутри адаптивного div, поэтому оно пропорционально меняет размер. Использование padding-bottom = image height / width * 100, чтобы сделать его отзывчивым. Ниже находится раздел содержимого, который нужно подтянуть, чтобы перекрыть этот div фонового изображения. Я пробовал отрицательное нижнее поле для фонового div и отрицательное верхнее поле для этого содержимого. Когда вы сжимаете экран вниз, отрицательное поле начинает вытягивать содержимое под фиксированной навигацией и над экраном из поля зрения. Он должен оставаться в поле зрения хотя бы на минимальном расстоянии ниже фиксированной навигации. Как лучше всего это сделать? Если возможно, предпочтительнее чистое решение CSS, но я могу использовать jQuery, если это не так. Спасибо за помощь.
Рабочий пример: https://jsfiddle.net/7ow9y41g/
#fixed-nav {
top: 0;
background: #EEE;
position: fixed;
min-height: 2em;
width: 100%;
}
#fixed-nav ul {
display: flex;
list-style-type: none;
}
#fixed-nav ul li {
display: inline-block;
width: 100%;
}
#background {
background: orange;
padding-bottom: 30%; /* padding-bottom = height/width * 100% */
text-align: center;
width: 100%;
}
#background h2 {
color: rgba(255, 255, 255, .2);
padding-top: 4em;
}
#content {
margin-top: -18em;
}<div id = "fixed-nav">
<ul>
<li>Nav Link One</li>
<li>Second Nav Link</li>
<li>Another Nav Link</li>
<li>The Last Link</li>
</ul>
</div>
<div id = "background">
<h2>div with background image</h2>
</div>
<div id = "content">
<h1>Page content overlaps</h1>
<p>background-image padding-bottom = height/width * 100 for responsive
background image</p>
<p>Lorem ipsum dolour sit met, consectetur adipiscing elit. Sed various
libero elit, iaculis consectetur justo dignissim eu. Suspendisse potenti.
Cras ullamcorper, felis quis molestie dignissim, nunc dui interdum metus,
ut laoreet odio risus eget libero. Nullam sed iaculis metus. Fusce vestibulum
justo mauris, eu imperdiet tortor iaculis et. Duis volutpat porta ligula
sit amet vehicula. Donec iaculis aliquam ullamcorper. Suspendisse vitae
pharetra libero.</p>
<p>Nullam enim mauris, hendrerit quis varius id, vehicula id dui. Praesent
varius lacus id faucibus rhoncus.Suspendisse potenti. Cras ullamcorper,
felis quis molestie dignissim, nunc dui interdum metus, ut laoreet odio
risus eget libero. Nullam sed iaculis metus. Fusce vestibulum justo mauris.
Praesent semper sed lectus in volutpat. Sed urna lectus, sodales vel
pharetra vitae, commodo vel orci. Vestibulum ante mauris, ultricies et magna at,
dictum suscipit nulla. Praesent libero metus, blandit eu hendrerit vel,
maximus et nunc.</p>
</div>Разве не было бы проще, если бы вы просто использовали background-img и background-size: cover` для своего элемента div#content и использовали смещение поля div#fixed-nav? Таким образом вы полностью исключите элемент div#background.
это - эффект, который вам нужен?
Это близко, но не совсем так, размер фонового изображения должен изменяться пропорционально, чтобы все оно всегда было на 100% видимым. Поэтому я не могу использовать на нем background-size: cover.
Ответы 3
Поправьте меня, если я ошибаюсь, но, думаю, вам нужно добавить высоту. Вот мой код:
#fixed-nav {
top: 0;
background: #EEE;
position: fixed;
min-height: 2em;
width: 100%;
float: left;
}
#background {
background: orange;
text-align: center;
width: 100%;
height: 50px;
float: left;
margin-top: 50px;
}
#content {
margin-top: 0;
float: left;
}
Надеюсь, это поможет. Если нет, вам нужно уточнить детали.
Похоже, у него будет фоновое изображение с фиксированной высотой, но мне нужно, чтобы оно было отзывчивым, чтобы оно сжималось и увеличивалось пропорционально браузеру, отсюда и трюк padding-bottom для высоты фонового div. Я хотел чего-то вроде этого: jsfiddle.net/h1u4zfyt
Используйте опцию height для #fixed-nav вместо min-height.
Затем используйте опцию margin-top:|fixed-nav's height| для первого элемента, который имеет 'position: relative' (в вашем коде = #background).
И нет необходимости определять значение margin для #content ... просто используйте position: relative
body {
margin: 0;
}
#fixed-nav {
top: 0;
background: #EEE;
position: fixed;
height: 50px;
width: 100%;
}
#fixed-nav ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
}
#fixed-nav ul li {
display: inline-block;
width: 100%;
}
#background {
background: orange;
min-height: 100px;
padding: 30px 10px;
margin-top: 50px;
text-align: center;
width: 100%;
}
#background h2 {
color: rgba(255, 255, 255, .2)
}
#content {
position: relative
}<div id = "fixed-nav">
<ul>
<li>Nav Link One</li>
<li>Second Nav Link</li>
<li>Another Nav Link</li>
<li>The Last Link</li>
</ul>
</div>
<div id = "background">
<h2>div with background image</h2>
</div>
<div id = "content">
<h1>Page content overlaps</h1>
<p>background-image padding-bottom = height/width * 100 for responsive background image</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero elit, iaculis consectetur justo dignissim eu. Suspendisse potenti. Cras ullamcorper, felis quis molestie dignissim, nunc dui interdum metus, ut laoreet odio risus eget libero.<br/>Nullam sed iaculis metus. Fusce vestibulum justo mauris, eu imperdiet tortor iaculis et. Duis volutpat porta ligula sit amet vehicula. Donec iaculis aliquam ullamcorper. Suspendisse vitae pharetra libero.</p>
<p>Nullam enim mauris, hendrerit quis varius id, vehicula id dui. Praesent varius lacus id faucibus rhoncus.Suspendisse potenti. Cras ullamcorper, felis quis molestie dignissim, nunc dui interdum metus, ut laoreet odio risus eget libero. Nullam sed iaculis metus.<br/>Fusce vestibulum justo mauris. Praesent semper sed lectus in volutpat. Sed urna lectus, sodales vel pharetra vitae, commodo vel orci. Vestibulum ante mauris, ultricies et magna at, dictum suscipit nulla. Praesent libero metus, blandit eu hendrerit vel, maximus et nunc.</p>
</div>Спасибо за помощь. В вашем примере фоновое изображение не реагирует. При сжатии он остается той же высоты. Его высота / ширина должны пропорционально уменьшаться при изменении размера браузера. Это больше похоже на то, что я пытался сделать: jsfiddle.net/h1u4zfyt
Спасибо за отзыв. Я изменил значение высоты на минимальную высоту. И переместил значение заполнения для h2 в стиль родительского div. Пожалуйста, запустите фрагмент кода еще раз.
Вы можете решить эту проблему, поместив ваш <div id = "content"></div> внутрь <div id = "background"></div>. Например:
<div id = "background">
<div id = "content">
margin-top: 0;
</div>
</div>
по какой-то причине вы не хотите этого делать, вы также можете сделать следующее, установив для содержимого div position absolute и top: 50px; но я рекомендую установить z-index вашей панели навигации, чтобы она оставалась наверху .. например:
#fixed-nav {
top: 0;
background: #EEE;
position: fixed;
min-height: 2em;
width: 100%;
z-index: 999;
}
#content {
position: absolute;
top: 50px;
}
Надеюсь, поможет. Счастливого кодирования и счастливых праздников!
Думаю, это натолкнуло меня на правильную идею. Вместо использования статического значения, такого как top: 50px, я могу выполнить расчет, чтобы контент перемещался вверх по мере уменьшения фоновых изображений, но не так быстро, чтобы он выходил за пределы экрана. Как это: jsfiddle.net/h1u4zfyt Спасибо большое!
На самом деле, другой способ, который вы предложили, работает даже лучше, но вместо div содержимого внутри фонового div у меня есть фоновый div внутри содержимого. Затем я использую абсолютное позиционирование, чтобы фон оставался в верхней части экрана, а контент оставался там, где должен быть. На самом деле есть второй div фонового изображения под контентом, который я позиционирую аналогичным образом. Спасибо за идею, я на правильном пути.
Я рад, что у вас получилось! Счастливого кодирования и счастливого Рождества.
Подскажите, пожалуйста, в каком медиа-сериале оно перекрывается.