Я создал нижний колонтитул #social_links, который при прокрутке прилипает к нижней части веб-страницы. Он установлен на 100% от верхней части поля. Он отлично работает во всех браузерах для просмотра на рабочем столе, а также для chrome на ios. Однако на chrome для android возникает проблема, когда фоновое изображение тела расширяется ниже нижнего колонтитула. Это происходит, когда пользователь прокручивает страницу вниз, в результате чего адресная строка скрывается, но сама веб-страница не переполняет ось Y (она отображается в полноэкранном режиме). Я не хочу, чтобы адрес не скрывался, я хочу, чтобы фон не расширялся за нижний колонтитул, если браузер работает в полноэкранном режиме. Я разрабатываю этот веб-сайт в приложении flask.
base. html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
</head>
<body>
<div id="page_container">
<header>
<div class="title">
<a href={{ url_for('main.index') }} title="WebPage">
<img src="{{ url_for('static', filename='images/title-logo.jpg')}}">
</a>
<ul id="menu-top-menu">
<li class="nav-item">
<a href={{ url_for('main.page1') }} class="nav-item-link">Page1</a>
</li>
<li class="nav-item">
<a href={{ url_for('main.page2') }} class="nav-item-link">Page2</a>
</li>
<li class="nav-item">
<a href={{ url_for('main.page3') }} class="nav-item-link">Page3</a>
</li>
<li class="nav-item">
<a href={{ url_for('main.page4') }} class="nav-item-link">Page4</a>
</li>
</ul>
</div>
</header>
<main class="container">
</main>
<div id="social_links">
<a href="https://www.facebook.com/" class="facebook" title="Facebook" target="_blank">
<img src="{{ url_for('static', filename='images/facebook.jpg')}}">
</a>
<a href="https://twitter.com/" class="twitter" title="Twitter" target="_blank">
<img src="{{ url_for('static', filename='images/twitter.jpg')}}">
</a>
<a href="https://www.instagram.com/" class="instagram" title="Instagram" target="_blank">
<img src="{{ url_for('static', filename='images/instagram.jpg')}}">
</a>
<a href="https://www.youtube.com/channel/" class="youtube" title="YouTube" target="_blank">
<img src="{{ url_for('static', filename='images/youtube.jpg')}}">
</a>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
base. css
body {
background: url('/static/images/homepage.gif') center center;
height: auto;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
}
#page_container {
display: table;
position: relative;
min-height: 100%;
}
header {
margin-top: -2%;
margin-bottom: 3%;
}
.title img {
display: inline-block;
width: 15%;
height: auto;
margin-left: 1%;
margin-top: 1%;
}
#menu-top-menu {
margin-top: -7%;
display: flex;
justify-content: flex-end;
list-style-type: none;
}
#menu-top-menu li {
width: 20%;
}
#menu-top-menu li a {
font-family: Arial,Helvetica,sans-serif;
display: inline-block;
text-transform: uppercase;
font-size: 1.5vw;
text-decoration: none;
color: #ffffff;
transition: opacity 300ms;
letter-spacing: 1px;
transition: all 300ms;
}
#menu-top-menu li a:hover {
opacity: 0.5;
}
.container {
min-height: 100%;
}
#social_links {
background-color: #1b1b1b;
width: 100%;
position: absolute;
top: 100%;
margin: 0;
padding-top: .4%;
padding-bottom: .4%;
text-align: center;
}
#social_links a {
display: inline-block;
margin: 0 15px;
}
#social_links a:hover {
opacity: 0.5;
}
#social_links .facebook img {
width: 20px;
}
#social_links .instagram img {
width: 27px;
}
#social_links .twitter img {
width: 32px;
}
#social_links .youtube img {
width: 22px;
}