как сохранить страницу тела прокрутки под заголовком

У меня есть следующий файл «layout.cshtml» в проекте MVC 5:как сохранить страницу тела прокрутки под заголовком

<!DOCTYPE html> 
<html> 
<head> 

    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 

</head> 

<body style="background-image: url('/Content/images/background.png')"> 
<div id="master" style="padding: 20px; width: 100%; position: fixed; height: 75px; z-index: 9999;"> 
    bunch of stuff removed for clarity 
</div> 

    @RenderBody() 

    @RenderSection("scripts", required: false) 

</body> 
</html>

«мастер» ДИВ содержит панель инструментов, которая заполняется с помощью JS и позиционированного в верхней части страницы, где она остается поверх всего и игнорирует прокрутку страницы, чтобы она всегда была видна. Эта часть, похоже, работает нормально.

Проблема в том, что остальная часть моей страницы (которая заполняется вызовом @RenderBody()) будет прокручиваться под панелью инструментов. Я бы хотел, чтобы верхняя часть этого раздела не превышала нижнюю часть панели инструментов. Я попытался поместить @RenderBody() в свой собственный div и пробовать различные «позиции» (фиксированные, относительные, абсолютные). Я даже попробовал div вокруг этого div, с различными комбинациями «позиций» для обоих. Я либо получаю тело, которое не будет прокручиваться вообще, или одно, которое прокручивается под панелью инструментов.

Есть ли способ сделать то, что я ищу?

Спасибо,

Эндрю

источник

2013-12-12 Starfleet Security

Поскольку DIV с идентификатором = «мастера» имеет стиль положения установлен в фиксированной, она будет отображаться в фиксированном положении относительно окна браузера. Для того, чтобы переместить содержимое, которое будет отображаться на дисплее «ниже» этого, вы должны установить

style="margin-top:75px"

к элементу/контейнер, который следует после этого DIV. Это вытолкнет его из-за главного div, чтобы он не перекрывался.

Пример:

<div style="margin-top:75px"> 
    @RenderBody() 

    @RenderSection("scripts", required: false) 
</div>

ВТОРОЙ ВАРИАНТ: Вы также можете рассмотреть вопрос о создании

position:relative

вместо

position:absolute

UPDATE (см комментарии ниже):

Попробуйте установить положение подзаголовка (секция скрипта) div на фиксированное, как и в главном разделе заголовка, затем установите для свойства «top» значение 75px. Это заблокирует его к основанию главного заголовка:

<div style="position:fixed; top:75px;"> 
    @RenderBody() 

    @RenderSection("scripts", required: false) 
</div>

UPDATE 2: Установите этот стиль как на заголовок и тело. Сначала это скроет содержимое, которое обычно будет видно за кнопками заголовка. Во-вторых, это блокирует фон обоих контейнеров вместе, поэтому прокрутка не приведет к появлению шва между ними. Это приводит к тому, что центральное содержимое исчезает, когда оно достигает нижнего края заголовка.

background: url("/Content/images/background.png") repeat fixed 0% 0% transparent;

источник

2013-12-12 19:50:31 bwright

Я думал, что это сработает, поскольку оно имеет прекрасный смысл и является одной из немногих вещей, которые я не думал попробовать. К сожалению, это не так. Я попробовал несколько комбинаций настроек полей и позиций в обоих или обоих div (я также попытался добавить один вокруг @RenderBody()), но ни один из них не работал так, как я этого хочу. Тело страницы продолжает прокручиваться под панелью инструментов. –

Возможно, я неправильно понял ваш оригинальный вопрос. См. Мое обновление выше. – bwright

Боюсь, что это все еще не совсем так.Если я устанавливаю второй div на «fixed», то я не могу прокручивать этот раздел, поэтому все, что не подходит в окне браузера, невозможно увидеть или получить. Если я использую «относительный» или «абсолютный», он по-прежнему прокручивается под панелью инструментов выше. –

как сохранить страницу тела прокрутки под заголовком

ответ

Смежные вопросы