Контент не перемещается по оболочке div - PullRequest
Новая
       0

Контент не перемещается по оболочке div

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

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

Вот ссылка на jsfiddle, показывающая, что я пробовал: https://jsfiddle.net/o5p8yuvx/5/.

Однако это не работает так, как задумано. Содержимое начинается с topbar, но не справа от sidebar (я закомментировал sidebar, чтобы показать, что он находится под topbar; удаление его из блока комментариев будет иллюстрировать, что оно не находится на право на sidebar). Я хочу, чтобы arbitrary text за пределами обеих оболочек располагался в пустой части страницы, которая не занята ни одной из полос (большое пустое пространство под topbar и справа от sidebar), но в настоящее время она просто находится под topbar. Поскольку они оба являются обертками, почему он сидит только под topbar, а не под topbar и , сидящими справа от sidebar?

Однако это только пример; другие div с содержимым в них вызывают ту же проблему. Как сделать так, чтобы весь дальнейший контент находился вне баров, как sidebar сидит под topbar?

Ответы [ 2 ]

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

Лучше всего создать новый <div> специально для содержимого: 

<div class="content">
  arbitrary text
</div>

Затем вы можете расположить <div> так, чтобы он заполнил оставшееся пространство: 

.content {
  margin: 0 0 0 300px;
}


body {
  margin: 0;
}

.topwrapper {
  height: 60px;
}

.sidewrapper {
  width: 300px;
}

.topbar {
  background-color: grey;
  position: fixed;
  width: 100%;
  height: 60px;
  margin: 0;
}

.topbar ul {
  list-style-type: none;
}

.topbar li {
  color: blue;
}

.topbar a:hover {
  background-color: black;
}

.sidebar {
  background-color: black;
  position: fixed;
  width: 300px;
  height: 100%;
  margin: 0;
}

.sidebar ul {
  list-style-type: none;
}

.sidebar li {
  color: blue;
}

.sidebar a:hover {
  background-color: white;
}

.content {
  margin: 0 0 0 300px;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Webpage</title>
</head>

<body>
  <div class="topwrapper">
    <div class="topbar">
      <ul>
        <li><a style="float: left">Link 1</a></li>
        <li><a style="float: left">Link 2</a></li>
        <li>
          <p style="float: right">Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidewrapper">
    <div class="sidebar">
      <ul>
        <li><a>Link 3</a></li>
        <li><a>Link 4</a></li>
        <li>
          <p>Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="content">
    arbitrary text
  </div>
</body>

</html>

Я также предоставил jsfiddle .

Если вы хотите, чтобы ваш код был семантически правильным, вы можете использовать <main> вместо <div class="content">, а затем изменить css на ... 

main {
  margin: 0 0 0 300px;
}


body {
  margin: 0;
}

.topwrapper {
  height: 60px;
}

.sidewrapper {
  width: 300px;
}

.topbar {
  background-color: grey;
  position: fixed;
  width: 100%;
  height: 60px;
  margin: 0;
}

.topbar ul {
  list-style-type: none;
}

.topbar li {
  color: blue;
}

.topbar a:hover {
  background-color: black;
}

.sidebar {
  background-color: black;
  position: fixed;
  width: 300px;
  height: 100%;
  margin: 0;
}

.sidebar ul {
  list-style-type: none;
}

.sidebar li {
  color: blue;
}

.sidebar a:hover {
  background-color: white;
}

main {
  margin: 0 0 0 300px;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Webpage</title>
</head>

<body>
  <div class="topwrapper">
    <div class="topbar">
      <ul>
        <li><a style="float: left">Link 1</a></li>
        <li><a style="float: left">Link 2</a></li>
        <li>
          <p style="float: right">Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidewrapper">
    <div class="sidebar">
      <ul>
        <li><a>Link 3</a></li>
        <li><a>Link 4</a></li>
        <li>
          <p>Welcome</p>
        </li>
      </ul>
    </div>
  </div>
  <main>
    arbitrary text
  </main>
</body>

</html>
0 голосов
/ 25 февраля 2020

Поскольку вы используете 2 фиксированных свойства, вам нужно будет указать, как далеко от вершины установить боковую панель. Вы можете исправить это с помощью 1 строки в вашем css, чтобы указать, как далеко от вершины родительского контейнера вы хотите, чтобы ваш div был: 

.sidebar {
  ...
  top: 60px;
}

Я использовал 60px, потому что это размер ваша верхняя панель. Если верхняя панель изменяется, вы можете соответствующим образом настроить расположение боковой панели. Вот обновленная скрипка

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

Если позиция: абсолютная; или положение: фиксированное; - свойство top устанавливает верхний край элемента на единицу выше / ниже верхнего края его ближайшего предка.

Из-за этого css начинает смотреть выше на следующий " позиционируется как "предок" и использует это как ссылку на то, где вершина должна быть

Лучшие ссылки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...