it-swarm.com.ru

Разместите div ниже панели навигации и не перекрывайте содержимое

Моя проблема в том, что я установил панель навигации в верхней части моей веб-страницы, и она включает в себя как боковые поля, так и верхнюю. Ниже этой панели навигации я хочу установить прокручиваемый контейнер.

Позвольте мне сказать, что я использую Bootstrap 3.2.0, чтобы выложить сайт.

Проблема заключается в том, что из-за полей моей панели навигации содержимое, которое я хочу разместить ниже, перекрывает панель навигации, и оно отображается помимо панели навигации. Для лучшего объяснения этого я предоставлю вам мой код и пример из жизни:

UPDATE: Я заметил кое-что, что немного усложняет, с моей точки зрения, и это то, что у тела есть правило, чтобы скрыть прокрутку, и не позволяет прокручивать вверх/вниз:

Я хотел бы просто прокрутить содержимое «Привет, мир», и, очевидно, весь контент показывается от первого слова: «НАЧАЛО» до «КОНЕЦ».

body {
   overflow: hidden;
}

http://www.bootply.com/TZebvFEl3T (Я обновил код bootply с необходимыми ограничениями).

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="divider-vertical"></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Options</a></li>
   </ul>
</nav>

<div>
    <p>BEGIN</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

ОБНОВЛЕНИЕ 2:

Экспериментируя с вашими ответами и собственными исследованиями, я достиг чего-то, что мне подходит, у меня есть свиток для div с контентом под меню навигации, и теперь контент не перекрывается.

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

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

Я думаю, что я ищу что-то вроде этого для моего контейнера, пожалуйста, посмотрите на следующую ссылку:

Содержимое со 100% между верхним и нижним колонтитулом

И вот мой код:

http://www.bootply.com/knJkGoEHWQ

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="container-fluid scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ... 
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

body, html {
    height: 100%;
    overflow: hidden;
    padding-top: 44px;
}

.my-own-style {
    margin-left: 37px;
    margin-top: 37px;
}

.scroll {
    overflow: auto;
    height: 80%;
    padding: 0;
    margin-left: 37px;
}

ОБНОВЛЕНИЕ 3 (РЕШЕНИЕ):

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

Более того, я установил высоту 100% для моего основного контейнера, чтобы он расширялся по всему элементу div, в котором он находится.

Вот решение:

http://www.bootply.com/sazMMHNCGy

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

body, html {
    height: 100%;
    overflow: hidden;
    padding-top: 44px;
    padding-bottom: 25px;
}

.my-own-style {
    margin-left: 37px;
    margin-top: 37px;
}

.scroll {
    overflow: auto;
    height: 100%;
    padding: 0;
    margin-left: 37px;
}

И для меня это решение, которое я искал.

11
Joe Lewis

Мне действительно не нравится добавлять элементы, которые просто существуют для целей продвижения контента. Это то, что позиционирование предназначено для обработки. Лучший способ сделать это - начать с добавления отступов в верхней части тела, как сказал @davidg в своем ответе. Кроме того, чтобы переместить навигационную панель в нужное положение, не используйте поля. Вместо этого используйте верхнее, левое и правое свойства. Класс navbar-fixed-top уже устанавливает фиксированную позицию, поэтому вам не нужно указывать значение свойства position. Я также добавил класс контейнера-жидкости в ваш div (так, чтобы вы добавили немного отступов) и пользовательский класс с возможностью прокрутки для установки свойства переполнения.

ДЕМО

CSS:

html, body {
  height: 100%; /*Fixes the height to 100% of the viewport*/
}
body {
  padding-top: 87px; /*50px for the height of the navbar + 37px for the offset*/
  padding-bottom: 50px; /*50px for the height of the bottom navbar*/
}
.navbar-offset {
    top: 37px; /*Offsets the top navbar 37px from the top of the viewport*/
}
.container-fluid.scrollable {
  height: 100%; /*Sets the scrollable area to 100% of the viewport*/
  overflow: auto; /*Allows the scrollable area to have a scrollbar based on the height of its content*/
  background: #ccc;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top navbar-offset">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="container-fluid scrollable">
    <p>BEGIN</p>
    <p>Hi World</p>

    ...

    <p>END</p>
</div>


<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    </ul>
</nav>
8
jme11

Из документации начальной загрузки :

Обязательное заполнение тела Фиксированная навигационная панель будет перекрывать ваш другой контент, если вы не добавите отступ в верхнюю часть <body>. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет: по умолчанию навигационная панель имеет высоту 50 пикселей.

Так что просто добавьте ваше тело дополнения:

body
{
    padding-top: 70px;
}

Если вы не хотите, чтобы ваше тело прокручивалось за панелью навигации, измените свой CSS на использование отступов вместо margin:

.my-own-style {
    padding-left: 37px;
    padding-top: 37px;
}
8
DavidG

Вы должны сместить прокручиваемый div перед фиксированным div:

http://www.bootply.com/3UpMI5yTIA

.scroll-pre {
  height: 100px;
  width: 100%;
  background-color: inherit;
  position: fixed;
}

И HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>
<div class="scroll-pre"></div>
<div class="scroll">
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
</div>

ПРАВКА

http://www.bootply.com/CKD9nrQxG5

Если вы хотите прокрутить div (не на странице), то добавьте класс "scroll" в ваш div и прокрутите css:

body, html {
  overflow: hidden;
  height: 100%;
}

.scroll {
  margin-top: 100px; // Same as .scroll-pre height
  overflow: auto;
  height: 100%;
}

РЕДАКТИРОВАТЬ 2 (нижний колонтитул)

http://www.bootply.com/JwmaWgvWPI

Если вам нужен нижний колонтитул, стратегия та же, поместите фиксированный div в bottom:0. Опять же, это будет работать только в том случае, если вы поместите фон в div перед прокруткой и нижним колонтитулом.

Я настроил поля прокрутки, чтобы последний элемент был виден.

.scroll {
  margin-top: 100px;
  overflow: auto;
  height: 100%;
  padding-bottom:130px;
  margin-bottom: 30px;
}

.footer {
  position:fixed;
  bottom:0;
  height:30px;
  background:inherit;
  width:100%;
}
3
Miquel

вы можете просто исправить это, обновив поля до отступов ... и обновив div, как показано ниже.

HTML

<div id="content">....</div>

CSS

#content{
  position:absolute;
  top:100px;
}

Демо

2
Aru

Вы можете попробовать следующие коды:

HTML код:

<nav class="navbar navbar-default">
.......
</nav>

Код CSS:

.navbar{
border-radius: 0;
}
0
Nimesh Nayaju