Как сделать фиксированный столбец в CSS с помощью CSS Grid Layout?

Ответ 1

Вы написали:

Есть ли способ сделать левый столбец исправленным?

Я был бы признателен за то, чтобы он работал с сеткой.

Если вы хотите, чтобы элемент оставался элементом сетки, тогда ответ "нет".

Как только элемент имеет position: absolute или position: fixed (которое является формой абсолютного позиционирования со ссылкой на окно просмотра), оно приобретает новые характеристики:

• элемент удаляется из потока документов
• элемент удаляется из контекста форматирования сетки
• элемент больше не является элементом сетки

Из спецификации:

10. Абсолютное позиционирование

Абсолютно позиционированный дочерний элемент контейнера сетки является вне потока, а не элементом сетки, и поэтому не влияет на размещение других элементов или размер сетки.

Таким образом, элемент сетки не работает с абсолютным позиционированием.

Однако у вас не будет проблем с применением position: fixed в контейнере сетки.

Рассмотрите возможность управления своими #left и #right элементами отдельно. #left может быть контейнером сетки фиксированной позиции. #right может быть другим контейнером сетки и оставаться в потоке.

Кроме того, в стороне, вы предоставили свои элементы сетки на основе процентов:

.section {
    padding: 5% 5% 5% 5%;
}

При применении margin и padding к элементам сетки (и элементам гибкости) лучше избегать процентных единиц. Браузеры могут вычислять значения по-разному.

• Процентное заполнение элемента сетки игнорируется в Firefox.
• Почему в Firefox не работает надстройка пропусков?

Ответ 2

Вы можете добиться этого, добавив эти правила CSS к вашему id #left:

position: sticky; // See link
top: 0; //to make it stick to the top of the screen
height: 100vh; // make the height equal to 100 view height

Ссылка на липкую позицию: липкая позиция только с CSS

sticky - новое значение для свойства position, добавленное как часть спецификации модуля компоновки CSS3. Он действует аналогично относительному позиционированию, поскольку он ничего не удаляет из потока документов. Другими словами, липкий элемент не влияет на положение соседних элементов и не разрушает его родительский элемент.

Надеюсь, это поможет вам

EDIT (исправить неустойчивое поведение)

Чтобы не допустить, чтобы левая часть вскочила в конце страницы, просто добавьте следующее правило CSS к вашему id #left:

box-sizing: border-box;

См. Обновленный фрагмент кода:

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}

#right {
    background-color: beige;
}
  

<div id="container">
    <div id="left" class="section">
        <p>This should not scroll</p>
    </div>
    <div id="right" class="section">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
        </p>
        <p>
            Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
        </p>
        <p>
            In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
        </p>
    </div>
</div>

Ответ 3

Вы можете сделать что-то подобное

вот скрипка

вот код

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;

}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;
    height: 100%;
    position: fixed;
    width: 50%
}

#right {
    background-color: beige;
    overflow: scroll;
    width: 50%;
    right: 0;
    position: absolute;
}

Ответ 4

Вы не можете заставить левый быть липким, но вы можете сделать все содержимое в нем липким. Для этого вы должны создать липкий элемент-обертку и поместить в него весь контент следующим образом:

HTML:

<div class="grid">

    <div class="left">
       <div class="sticky_wrapper">Content</div>
    </div>

    <div class="right">
        Content
    </div>

</div>

CSS:

.grid { display: grid; grid-template-columns: 50% 50%; }
.left { background-color: aquamarine; }
.right { background-color: beige; }
.sticky_wrapper { position: sticky; top: 0; }

Таким образом, весь контент в липкой оболочке не будет подвергаться прокрутке.

Ответ 5

попробуй это:

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;

    p {
      position: fixed;
    }
}

#right {
    background-color: beige;
}

https://jsfiddle.net/km5gdrcm/3/

Ответ 6

Добавьте еще один div на правой панели, какую панель вы хотите прокрутить, чтобы дать max-height и overflow: auto; поэтому левая панель будет палкой, а правая панель будет прокручиваться.

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;
}

#right {
    background-color: beige;
}
.scroll-div {
    max-height: 300px;
    overflow: auto;
}

<div id="container">
    <div id="left" class="section">
        <p>This should not scroll</p>
    </div>
    <div id="right" class="section">
        <div class="scroll-div">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
        </p>
        <p>
            Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
        </p>
        <p>
            In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
        </p>
    </div>
    </div>
</div>

Ответ 7

У меня была одна и та же проблема. Мне нужен фиксированный sidenav (col 1) с прокручиваемым контентом (col 2). Вот как я решил проблему (обратите внимание, что я использую стилизованный компонент, но вы можете сделать это с помощью обычного css, sass, less или что-то еще):

<Grid>
  <SideNav>
    <Sider>
  </SideNav>
  <Content />
<Grid>

Теперь свойство css для каждого из этих стилизованных компонентов:

const Grid = styled.div'
  position: relative;
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'sidenav content';
'

const Sidenav = styled.div'
  position: relative;
  grid-area: sidenav;
'
const Content = styled.div'
  position: relative;
  grid-area: content;
  width: 100%;
'

const Sider = styled.aside'
  position: fixed;
  height: 100vh;
'

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