У меня есть изображение, которое я хочу охватить весь экран, прежде чем пользователь начнет прокрутку.Я изо всех сил пытаюсь объединить это с липким нижним колонтитулом, реализованным через flexbox.
Я обертываю весь контент внутри контейнера, включая CSS "flex: 1 0 auto", чтобы он увеличивался, чтобы заполнить пространство.Нижний колонтитул имеет свойство «flex-shrink: 0».
Проблема заключается в том, что обертка содержимого имеет высоту, превышающую 100% высоты экрана, поскольку она содержит большое количество содержимого.Поэтому я не могу установить высоту контейнера, содержащего изображение, на 100%, так как изображение будет тогда покрывать больше, чем высота экрана.
Есть предложения по решению этой проблемы?
Разметка:
<html>
<body>
<div class="home-container">
<div class="home-content-container">
Image
</div>
<div class="flex-container" id="copywriting-container">
Blah blah
</div>
</div>
<footer class="navbar footer-navbar navbar-inverse">
<div class="container footer-container">
Blah Blah
</div>
</footer>
</body>
</html>
CSS:
html, body {
height: 100%;
}
html {
position: relative;
overflow-y: scroll;
}
body {
display: flex;
flex-direction: column;
padding-top: 50px;
background-color: whitesmoke;
}
∕∕ Content wrapper
.home-container {
flex: 1 0 auto;
}
// Image container
.home-content-container {
background-image: image-url("blue_sky_copy5.jpg");
background-size: cover;
background-attachment: fixed;
}
// footer
.footer-navbar {
flex-shrink: 0;
}