How to limit position: fixed to the full width of the parent?

Question

There is a similar markup:

<div class="col-3"> <aside class="filter"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue fermentum enim, et viverra metus interdum non. Nulla nulla ligula, dignissim vestibulum congue non, rhoncus sed sapien. Suspendisse auctor sit amet sem non vulputate. Quisque et dapibus nunc. Phasellus rutrum quis tortor a condimentum. Morbi tincidunt hendrerit ipsum nec lacinia. Nunc consequat ligula justo, a posuere diam vestibulum non. </aside> </div>

And styles:

 .col-3 { width: calc((100% / 12) * 3 - (16px * 2)); } .filter { position: fixed; }

Position: fixed expands as usual, but it is impossible to hold it in the frame of the parent even with the use of inherit

How, then, to make the width filter === col-3 ?

zhurof zhurof 6.158 2 7 25 · Accepted Answer · 2018-08-15T10:01:42

C fixed this does not work. You can use position:sticky (does not work in IE), or position:absolute + js , or explicitly set the .filter width of the parent. Below is an example with position:sticky :

 * { box-sizing: border-box; } body{ margin:0; } .col-3 { width: 25%; height: 300vh; border-right: 1px solid; float:left; } .col-9 { width: 75%; height: 300vh; float:left; } .filter { position: sticky; top: 0; left: 0; width: 100%; background-color:#acd; }

 <div class="col-3"> <aside class="filter"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </aside> </div> <div class="col-9"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue fermentum enim, et viverra metus interdum non. Nulla nulla ligula, dignissim vestibulum congue non, rhoncus sed sapien. Suspendisse auctor sit amet sem non vulputate. Quisque et dapibus nunc. Phasellus rutrum quis tortor a condimentum. Morbi tincidunt hendrerit ipsum nec lacinia. Nunc consequat ligula justo, a posuere diam vestibulum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue fermentum enim, et viverra metus interdum non. Nulla nulla ligula, dignissim vestibulum congue non, rhoncus sed sapien. Suspendisse auctor sit amet sem non vulputate. Quisque et dapibus nunc. Phasellus rutrum quis tortor a condimentum. Morbi tincidunt hendrerit ipsum nec lacinia. Nunc consequat ligula justo, a posuere diam vestibulum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue fermentum enim, et viverra metus interdum non. Nulla nulla ligula, dignissim vestibulum congue non, rhoncus sed sapien. Suspendisse auctor sit amet sem non vulputate. Quisque et dapibus nunc. Phasellus rutrum quis tortor a condimentum. Morbi tincidunt hendrerit ipsum nec lacinia. Nunc consequat ligula justo, a posuere diam vestibulum non. </div>