Невозможно точно позиционировать оверлей с фиксированной позицией на элементе сетки - PullRequest
Новая
       55

Невозможно точно позиционировать оверлей с фиксированной позицией на элементе сетки

0 голосов
/ 01 марта 2019

Я пытаюсь создать сетку из 2 столбцов:
1) узкая фиксированная позиция боковая панель слева
2) Широкий столбец для основного содержимого справа.

Согласно этой записи существует проблема с элементами сетки с фиксированным положением.Один из ответов был таков:

оберните ваше содержимое в div и установите div в положение: fixed.

Автор успешно представил демонстрацию этой техники.Здесь фиксированная боковая панель была с правой стороны экрана.

Поскольку мне нужна моя фиксированная боковая панель слева, я адаптировал технику, как показано здесь .Моя адаптация была в основном для обеспечения ширина для

, наложенного на боковой панели: 
aside div {
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  /* padding: 0 15px 0 5px; */
  position: fixed;
}

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

1) Почему это происходит?

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

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Проблемы с фиксированным позиционированием

Первый элемент сетки имеет ширину 200 пикселей (в определении сетки используется grid-template-columns: 200px 1fr) и в то же время aside div внутри сеткипункт устанавливается width: 200px вместе с padding (и left: 0 не добавляется вместе с position: fixed.

Предложение

Но я быпредлагаем опустить фиксированное позиционирование для aside div и добавить grid-template-rows: 100vh к контейнеру сетки. Это ограничит вашу сетку в окне просмотра, и теперь вы можете добавить overflow-y: auto к двум элементам сетки по желанию.Это даст вам тот же эффект фиксированной боковой панели - см. Демонстрацию ниже: 

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100vh; /* ADDED */
  grid-template-areas: "sb mn";
  grid-column-gap: 10px;
}

.grid>* {
  margin: 0;
  padding: 0;
}

.sidebar {
  grid-area: sb;
  border: 1px solid green;
  /*padding: 0 5px;*/
  background-color: red;
  overflow: hidden; /* ADDED */
}

aside div {
  /* width: 200px; */
  margin: 0;
  padding: 0 5px; /* CHANGED */
  border: 1px solid blue;
  /* padding: 0 15px 0 5px; */
  /* position: fixed; */
}

.main {
  grid-area: mn;
  overflow-y: auto; /* ADDED */
}
<div class="grid">
  <aside class="sidebar">
    <div>
      <h4>laboris nisi</h4>
      <p>
        Cum sociis natoque penatibus bibendum enim facilisis gravida neque convallis a cras. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient.
      </p>
      <p>
        Id neque aliquam vestibulum sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer.
      </p>
      <p>
        Vestibulum rhoncus est tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Feugiat nibh sed pulvinar proin gravida.
      </p>
    </div>
  </aside>
  <div class="main">
    <h1>Cras semper auctor neque vitae</h1>
    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>
    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>
    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>
    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>
    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>
    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>
    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>
    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>
    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>
  </div>
  <!-- main -->
</div>
<!-- grid -->
0 голосов
/ 01 марта 2019

Вы можете просто добавить width:100% к вашей .grid > * {} части CSS.Это просто переопределит ширину всех дочерних элементов .grid, чтобы заполнить всю ширину элемента сетки, чтобы дочерние элементы не выходили за пределы сетки.

Вот каков ваш окончательный кодстанет: 

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "sb mn";
  grid-column-gap: 10px;
}

.grid>* {
  margin: 0;
  padding: 0;
  width: 100%;/*  This is the part I added */
}

.sidebar {
  grid-area: sb;
  border: 1px solid green;
  background-color: red;
}

aside div {
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  /* padding: 0 15px 0 5px; */
  position: fixed;
}

.main {
  grid-area: mn;
}
<div class="grid">
  <aside class="sidebar">
    <div>
      <h4>laboris nisi</h4>

      <p>
        Cum sociis natoque penatibus bibendum enim facilisis gravida neque convallis a cras. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient.
      </p>

      <p>
        Id neque aliquam vestibulum sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer.
      </p>

      <p>
        Vestibulum rhoncus est tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Feugiat nibh sed pulvinar proin gravida.
      </p>
    </div>
  </aside>

  <div class="main">
    <h1>Cras semper auctor neque vitae</h1>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>
  </div>
  <!-- main -->
</div>
<!-- grid -->

Но если вам просто нужна фиксированная боковая панель, вы можете просто добавить height:100vh; overflow-Y: scroll к .main или, как @ndvo предложил использовать position: sticky, этоэто гораздо лучшее решение.

Тогда ваш код должен стать: 

body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas: "sb mn";
  grid-column-gap: 2vw;/* using the unit 'vw'(2% of viewport-width) will make the gap responsive */
  height: 100vh; /* 100% of viewport-height. (Fill up the whole screen height)  */
}

.sidebar {
  grid-area: sb;
  padding: 0 5px;
  /* The part below is just appearance */
  box-shadow: inset 2px 2px red, inset -2px -2px red;
  background: yellow;
}

.sidebarContent {
  position: sticky;
  top: 0;
  /* The part below is just appearance */
  height:60vh;
  background: red;
  text-align: center;
  color: yellow
}

.main {
  grid-area: mn;
  padding: 0 5px;
  /* The part below is just appearance */
  box-shadow: inset 2px 2px red, inset -2px -2px red;
  background: green;
}

.mainContent {
  /* The part below is just appearance */
  background: red;
  text-align: center;
  color: yellow
}
<div class="grid">
  <aside class="sidebar">
    <div class="sidebarContent">
      SideBar Content
    </div>
  </aside>
  <div class="main">
    <div class="mainContent">
      Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>Main
      Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>
    </div>
  </div>
</div>

Касательная:

  • Я предпочитаю использовать box-shadows над border, поскольку границы занимают дополнительное пространствотем самым немного разрушая проценты сетки (может быть, я OCD ?).
  • Я также хотел бы порекомендовать GridGarden , игру с всего 28 очень простыми уровнями (в то времянаписания).Просто завершите это один раз.Это помогло мне;это может помочь и другим.
...