0

Есть подобная разметка:

<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>

И стили:

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

.filter {
  position: fixed;
}

Position: fixed как обычно расширяется, но зажать его в рамки родителя не получается даже с использованием inherit

Как в таком случае сделать так чтобы ширина filter === col-3?

1 ответ 1

1

C fixed такое не получится. Можно использовать position:sticky(не работает в IE), или position:absolute + js, или явно задать .filter ширину родителя. Ниже пример с 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>

1
  • Sticky даже лучше подошло, спасибо
    – user272575
    15 авг 2018 в 10:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.