Невозможно настроить основное приложение asp.net на полную ширину

Я создал новое приложение в приложении Asp.Net Core, используя шаблон Razor Pages. Что я хочу сделать, так это расширить основной div на всю ширину экрана.

Я пробовал следующее (Index.cshtml):

<div class = "full-width shade">
    <h1 class = "display-4">Welcome</h1>
    <p>Learn about <a href = "https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

С CSS:

.shade {
    background-color: aqua;
}

.full-width {
    width: 100%;
}

Я также пробовал:

.full-width {
    margin-left: 0px;
    margin-right: 0px;
}

И несколько других вариантов, но div, кажется, остается в центре экрана. Глядя на инструменты разработчика, контейнер заполняет ширину, а тег <main> — нет.

Мой вопрос: как я могу изменить это так, чтобы ширина основного div всегда заполнялась до доступной ширины окна браузера, но при этом сохранялась функциональность, которую дает загрузчик при работе с гораздо меньшим экраном?

html css asp.net-core

15.12.2020 13:09

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 150

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

как я могу изменить это так, чтобы ширина основного div всегда заполнялась к доступной ширине окна браузера, но при этом поддерживать функциональность, которую дает загрузчик при работе с гораздо меньшим экран?

Вы можете установить для свойства max-width контейнера body значение 100% на странице макета. Чтобы обновить код, выполните следующие действия.

На странице _Layout.cshtml (я предполагаю, что вы используете эту страницу макета): добавьте body-container в атрибут класса.

<div class = "container body-container">
    <main role = "main" class = "pb-3">
        @RenderBody()
    </main>
</div>

Затем добавьте следующий стиль в Index.cshtml:

    <style>
        .shade {
            background-color: aqua;
        }

        .body-container {
            /*remove the container default padding attribute*/
            padding-left: 0px !important;
            padding-right: 0px !important;
            /*increase width as per your need*/
            max-width: 100%;
        } 
    </style>

    <div class = "full-width shade">
        <h1 class = "display-4">Welcome</h1>
        <p>Learn about <a href = "https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>

Результат такой:

Если не удалить атрибут заполнения контейнера по умолчанию, результат будет таким:

16.12.2020 09:15