Как сделать, чтобы блок не выходил за пределы контейнера?

Question

[Василий Марков]

Всем привет!

Йа совсем новичок, помогите разобратьсйа, пожалуйста!

Суть. в html есть контейнер длйа всего содержимого (div class="wrapper"), ограниченный по ширине (max-width:1200px).

Внутри него есть блок с фиксированным позиционированием, соответственно параметры top:0, left:12%, а также width:76% (чтобы крайа блока совпадалb с краемйами всего содержимого). Но при уменьшении ширины экрана все едет к чертйам - этот блок сжимаетс сильней остального содержимого.

Собственно вопрос: как сделать так, чтобы этот блок при скроле оставалсйа на своем месте и чтобы нормально адаптировалсйа под ширину экрана?

Всем заранее огромное спасибо за ответы и советы!

PS Прошу прощенийа за немецкий акцент - не работает клавиша "я"

Answer 1

[Spaceoddity]

Если вкратце, то метода обычно такая:
У вас контентная часть шириной 1200px. Вы там как-то управляете этим контентом (центрируете, растягиваете на всю ширину). Но дело в том, что блок с фиксированным позиционированием свои координаты и размеры (если они явно указаны) рассчитывает от размера вьюпорта (экрана). Вам нужно продублировать разметку контентной части для фиксированного блока. Т.е. сделать "фиксированную обёртку" и уже внутри неё подобным образом (как и .wrapper) разметить контент. Например:

.wrapper{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.fixed{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.fixed-content{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Comments

[Василий Марков]

Spaceoddity, спасибо огромное!

Буду пробовать. Йа хотел делать фиксированную плашку на всю ширину экрана, прозрачную или полупрозрачную. Но ваш вариант лучше! Спасибо!