Масштабирование содержимого в рамках абсолютно позиционированного, адаптивного внешнего контейнера.

Question

У меня есть проект, который включает в себя боковую панель, которая плавает над изображением.Боковая панель установлена ​​на position: absolute, чтобы держать ее поверх изображения и помогать масштабировать вместе с ней при изменении размера экрана.

Вот кодовая ручка, которая в основном воссоздает то, над чем я работаю: https://codepen.io/gojiHime/pen/JmYqaz

У меня проблема с контролем размера содержимого в контейнере wrapper.Я хочу, чтобы preview div масштабировался вместе с контейнером wrapper.В настоящее время он не работает должным образом, так как preview div не начинает масштабирование при изменении ширины и высоты для wrapper и thumbs-inner.thumbs-inner div в большинстве случаев корректно масштабируется, но нижняя часть div обрезана, поэтому вы не можете видеть нижнюю часть полосы прокрутки на маленьких экранах.

Я знаю, я установил overflow: hidden наwrapper, но без него содержимое в preview будет выходить за его пределы при изменении высоты wrapper.

Итак, я ищу идеи о том, как решить вышеупомянутые проблемы.wrapper должен оставаться в абсолютном положении, а у thumbs-inner div должна быть функция вертикальной прокрутки, поэтому я ничего не могу с этим поделать.Я не думаю, что установка высоты имеет смысл для wrapper, поскольку она должна масштабироваться по высоте и ширине.

РЕДАКТИРОВАТЬ: Не уверен, насколько это поможет, но это скриншот того, что макетвсе должно выглядеть следующим образом: введите описание изображения здесь

Логотип Kraftmaid, полноразмерный эскиз и текст под ним (которые находятся в элементе .preview в коде ручки) должны бытьвиден постоянно при изменении размера экрана.

Answer 1

Я не уверен, что это именно то, что вы ищете, но, как правило, для адаптивных макетов вы бы хотели избегать фиксированных размеров, таких как конкретные значения ширины, заданные в x числе пикселей.

Этопоказывает ваш код с адаптивными макетами для .wrapper и .thumbs-inner (обратите внимание, что я не обращался к каким-либо проблемам с содержимым в этих двух элементах div, поскольку не знаю, какой у вас макет):

https://codepen.io/anon/pen/ZqrZaj

Обратите внимание, что:

• Я переключил два div макета для использования box-sizing: border-box;, что позволит вам использовать пиксели для полей и отступов, но при этом использовать проценты дляwidth.

• Я удалил ширину из .wrapper и переключился на абсолютные левые и правые объявления в процентах - если вы измените эти значения, макет все равно будет работать.

• Я добавил границы, чтобы сделать макет более наглядным.