No olvides que en las ciencias un problema puede tener diversas soluciones, de igual modo compartimos lo más óptimo y mejor.
Solución:
Puede lograr esto agregando estas reglas CSS a su 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
Enlace para posición fija: posición fija con nada más que CSS
sticky es un nuevo valor para la propiedad de posición, agregado como parte de las especificaciones del módulo de diseño CSS3. Actúa de manera similar al posicionamiento relativo, ya que no elimina nada del flujo de documentos. En otras palabras, un elemento fijo no tiene ningún efecto sobre la posición de los elementos adyacentes y no colapsa su elemento principal.
Espero que te ayude
EDITAR (corregir comportamiento nervioso)
Para evitar que la parte izquierda salte al final de la página, simplemente agregue la siguiente regla CSS a su id #left:
box-sizing: border-box;
Ver fragmento de código actualizado:
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;
This should not scroll
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.
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.
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.
Tu escribiste:
¿Hay alguna forma de arreglar la columna de la izquierda?
Agradecería una forma de hacerlo funcionar con el diseño de la cuadrícula.
Si desea que el elemento siga siendo un elemento de la cuadrícula, la respuesta es “no”.
Una vez que un elemento ha position: absolute o position: fixed (que es una forma de posicionamiento absoluto, con referencia a la ventana gráfica), adquiere nuevas características:
- el elemento se elimina del flujo de documentos
- el elemento se quita de la contexto de formato de cuadrícula
- el elemento ya no es un elemento de cuadrícula
De la especificación:
10. Posicionamiento absoluto
Un elemento secundario absolutamente posicionado de un contenedor de cuadrícula está fuera de flujo y no es un elemento de cuadrícula, por lo que no afecta la ubicación de otros elementos o el tamaño de la cuadrícula.
Entonces un elemento de cuadrícula no funciona bien con el posicionamiento absoluto.
Sin embargo, no tendrá problemas para solicitar position: fixed a un contenedor de rejilla.
Considere administrar su #left y #right elementos por separado. #left puede ser un contenedor de rejilla de posición fija. #right puede ser otro contenedor de rejilla y permanecer en flujo.
Además, como acotación al margen, le ha dado a sus elementos de cuadrícula un relleno basado en porcentajes:
.section
padding: 5% 5% 5% 5%;
Al aplicar margin y padding para los elementos de la cuadrícula (y elementos flexibles), es mejor mantenerse alejado de las unidades porcentuales. Los navegadores pueden calcular los valores de manera diferente.
- El porcentaje de relleno en el elemento de la cuadrícula se ignora en Firefox
- ¿Por qué el relleno de porcentaje no funciona en elementos flexibles en Firefox?
Finalizando este artículo puedes encontrar las ilustraciones de otros programadores, tú igualmente tienes la opción de mostrar el tuyo si dominas el tema.