Исправлено позиционирование элемента в нижней части окна просмотра - без обращения к позиции: исправлено (чистое CSS решение) - PullRequest
Новая
       1

Исправлено позиционирование элемента в нижней части окна просмотра - без обращения к позиции: исправлено (чистое CSS решение)

0 голосов
/ 15 февраля 2020

Я использую position:fixed, чтобы исправить панель навигации внизу страницы в одном из моих мобильных веб-проектов.

Однако поддержка браузера для position:fixed иногда отсутствует (например, Opera Mini), и, таким образом, моя навигационная панель выходит из строя для небольшого, но все же невежественного% пользователей указанного веб-приложения.

Существует ли чистый CSS способ добиться того же эффекта каким-либо другим способом? Например, flexbox и z-index (или что-то)? Было бы лучше, если бы он опирался на свойства, хорошо поддерживаемые во всех браузерах.

Если быть точным: я не ищу липкий нижний колонтитул, который прилипает к основанию, когда содержание страницы редкое, и в противном случае сдвигается вниз. Я ищу способ исправить что-то в нижней части страницы и позволить прокрутить содержимое "под ним".

Есть несколько ответов на такой вопрос, как мой на SO и в других местах . Но они в основном отступают до position:fixed (или JS). Я не хочу ни того, ни другого. Так есть ли другие доступные решения? Хотелось бы увидеть наглядный пример от экспертов отрасли. Заранее спасибо.

1 Ответ

0 голосов
/ 17 февраля 2020

Хорошо, это очень просто c, но вы можете попробовать что-то вроде этого: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        header, footer {
            background-color: blue;
            height: 80px;
        }

        section {
            height: calc(100% - 160px);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <header></header>
    <section></section>
    <footer></footer>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...