Случайный вопрос

Нижний колонтитул мерцает при переходе на разные страницы

0

У меня есть следующая разметка для отображения фиксированного нижнего колонтитула в основном макете:

<nav class="main-footer navbar navbar-expand navbar-white navbar-light" style="height: 40px;">
    <ul class="navbar-nav">
        <li class="nav-item d-none d-sm-inline-block">
            <a href="" class="nav-link"><strong>MySite</strong></a>
        </li>
        <li class="nav-item d-none d-sm-inline-block">
            <a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a>
        </li>
        <li class="nav-item d-none d-sm-inline-block">
            <a asp-area="" asp-controller="Home" asp-action="PrivacyPolicy" class="nav-link">Privacy Policy</a>
        </li>   
        <li class="nav-item d-none d-sm-inline-block">
            <a asp-area="" asp-controller="Home" asp-action="Terms" class="nav-link">Terms</a>
        </li>
    </ul>     
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            Your IP: @(ipAddress)  
        </li>
    </ul>
</nav>

С такой разметкой нижний колонтитул продолжает мерцать при перемещении между страницами.

Раньше я использовалfooter тег, который отлично работал, но я изменил его на приведенный выше код, чтобыnav элементы как в шапке.

Есть ли способ решить эту проблему?

  • 0
    Фиксируется ли Footer когда он мерцает? Я проверил ваш код в своем приложении, вроде есть вертикальная полоса прокрутки.
Теги:
html
asp.net-core bootstrap-4
CodeFix

1 ответ

0
Лучший ответ

Возможно, проблема связана сnav атрибут высоты. Если вы хотите установить высоту нижнего колонтитула, попробуйте установитьline-height атрибут вfooter элемент. Код, как показано ниже:

@{
    var ipAddress = "";
    if (ViewBag.ipAddress != null)
    {
        ipAddress = ViewBag.ipAddress;
    }
    else
    {
        ipAddress = "Null";
    }
}
<footer class="border-top footer text-muted" style="line-height:40px !important;" > 
        <nav class="main-footer navbar navbar-expand navbar-white navbar-light" >
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item d-none d-sm-inline-block">
                    <a href="" class="nav-link"><strong>MySite</strong></a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a asp-area="" asp-controller="Home" asp-action="PrivacyPolicy" class="nav-link">Privacy Policy</a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a asp-area="" asp-controller="Home" asp-action="Terms" class="nav-link">Terms</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    Your IP: @(ipAddress)
                </li>
            </ul>
        </nav> 
</footer>

Тогда результат такой:

Изображение 291459

Обновлять:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication1</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                    <partial name="_LoginPartial" />
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    @{
        var ipAddress = "";
        if (ViewBag.ipAddress != null)
        {
            ipAddress = ViewBag.ipAddress;
        }
        else
        {
            ipAddress = "Null";
        }
    }
    <footer class="border-top footer text-muted" style="line-height:40px !important;" > 
            <nav class="main-footer navbar navbar-expand navbar-white navbar-light" >
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item d-none d-sm-inline-block">
                        <a href="" class="nav-link"><strong>MySite</strong></a>
                    </li>
                    <li class="nav-item d-none d-sm-inline-block">
                        <a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a>
                    </li>
                    <li class="nav-item d-none d-sm-inline-block">
                        <a asp-area="" asp-controller="Home" asp-action="PrivacyPolicy" class="nav-link">Privacy Policy</a>
                    </li>
                    <li class="nav-item d-none d-sm-inline-block">
                        <a asp-area="" asp-controller="Home" asp-action="Terms" class="nav-link">Terms</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        Your IP: @(ipAddress)
                    </li>
                </ul>
            </nav> 
    </footer>
    @*<footer class="border-top footer text-muted">
            <div class="container">
                &copy; 2021 - WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            </div>
        </footer>*@
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Поделиться
Источник
  • 0
    Проблема все еще существует, потому что есть полоса прокрутки, хотя содержимое страницы невелико.
  • 0
    Привет, @ Ivan-MarkDebono, если это так, проблема может быть связана с другим стилем CSS (как мы видим, в моем примере нет полосы прокрутки), я опубликую весь исходный код страницы макета, вы можете сослаться на к нему. Кроме того, вы также можете создать аналогичный образец для воспроизведения проблемы.

Другие вопросы

  • Docker: PostgresSQL - произошла ошибка при подключении к базе данных.1 ответ

    Я пытаюсь запустить демонстрацию ASP.NET Core с PostgresSQL в Docker, но соединение с базой данных не работает. fail: Microsoft.EntityFrameworkCore.Database.Connection[20004] An error occurred using the connection to database 'ToDoApp' on server 'tcp://postgresserver:5432'. fail: Microsoft.EntityFra...

  • Выберите элемент, необходимый в vuejs, не работает1 ответ

    Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...

  • как добавить ссылки на липкую панель навигации1 ответ

    Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-i...

  • Как очистить тег li в selenium python с задействованными пространствами имен классов?2 ответ

    <div class="all__BrandsAllListGrid-sc-1410m2d-5 eWrRoU"><li class="all__BrandsAllListItem-sc-1410m2d-6 kLYBAG"><a href="/brands/00-seeds">00 Seeds</a></li><li class="all__BrandsAllListItem-sc-1410m2d-6 kLYBAG"><a href=&qu...

  • Как заблокировать меню боковой панели, скрытое при обновлении страницы1 ответ

    У меня есть меню боковой панели, которое было успешно скрыто и отображено. Когда меню боковой панели скрыто и я обновляю страницу или браузер, скрытое меню боковой панели вернется к своему первоначальному виду, а не в том положении, в котором оно было скрыто. Вопрос в том, как заблокировать, чтобы о...

  • Если, то Заявления в распознавании речи HTML [закрыто]1 ответ

    Закрыто. Этот вопрос требует подробностей отладки . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме Stack Overflow. Закрыт в прошлом месяце . Уточните этот вопрос Итак, я пытаюсь сделать голосового помощника html, и я борюсь с оп...

  • Как создать html-страницу со ссылкой [закрыто]1 ответ

    Закрыто . Этот вопрос должен быть более конкретным . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав этот пост . Закрыт в прошлом месяце . Уточните этот вопрос Как разместить видео ключи на моем...

  • Как добавить проверку ввода в React?2 ответ

    У меня простая форма, в которойfirstName а такжеlastName . <label htmlFor="firstName">First Name: </label> <input type="text" className="form-control" id="firstName" name="firstName" value={basicDet...

  • Фильтровать видео YouTube по категории1 ответ

    В настоящее время я работаю над проектом, который отображает множество популярных видео YouTube из нескольких регионов. В настоящее время я работаю над функцией, которая позволяет пользователям фильтровать результаты по категориям и не имею честного представления о том, с чего начать реализацию. Вот...

  • Избегайте неестественных разрывов слов4 ответ

    у меня есть<h1> название с длинным словом, например следующее. Ширина браузера, конечно, зависит от устройства, но я заметил, что на одном из моих устройств это выглядит так: [IMG_OUR_ID=69.png] что не очень хорошо разбирается в словах. Как вместо этого попросить браузер делать "более при...

CodeFix
Для будущих программистов
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум