Как мы пишем CSS как Wordpress с расширением правого div?

Question

Мы пишем пользовательский веб-сайт, но хотим, чтобы он выглядел аналогично Wordpress, поэтому мы написали код с «липкой» левой позиционной строкой и прокручиваемой правой.

Но когда выПриведя страницу внутрь, правые столбцы переносятся под левый. Любые идеи, почему и как решить?

Вот код CSS:

html, body, section, article, aside {
    min-height: 100%;
}

.sidemenu
{
    position: sticky;
    top: 0;
    height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}

.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}

.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}

Итак, у вас есть два DIV, слева - sidemenu, справа - pagebody.

Надеюсь, вы можете помочь.

Answer 1

Чтобы исправить положение боковой панели, нужно использовать position: fixed;. После этого оберните боковую панель div и body div в один контейнер и установите его ширину равной 100% (я также дал телу поле 0 в этой точке, чтобы удалить пробелы).

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

Вы можете опускать свои поплавки.

Вот скорректированный код:

html,
body,
section,
article,
aside {
  min-height: 100%;
  margin: 0;
}

.main {
  width: 100%;
}

.sidemenu {
  position: fixed;
  top: 0;
  height: 100vh;
  background-color: #333333;
  color: #ffffff;
  width: 160px;
}

.menu-link a {
  padding: 8px 2px 2px 8px;
  display: block;
  color: #ffffff;
  text-transform: capitalize;
}

.pagebody {
  width: calc(100% - 199.75px);
  text-align: left;
  padding: 20px;
  height: 300vh;  /**** used to demonstrate scrolling ****/
  margin-left: 160px;
  background-color: #BBB;
}

<div class="main">
  <div class="sidemenu">
    Side Menu

  </div>

  <div class="pagebody">
    body

  </div>
</div>