Динамическое вычисление позиции вправо с помощью cal c ()

Question

Мне было поручено стилизовать баннер, однако сам баннер является сторонним инструментом со строго ограниченными возможностями стилизации. Вероятно, будет проще, если я поделюсь примером того, с чем я работаю, а затем расскажу об ограничениях и о том, чего я пытаюсь достичь.

body {
  margin: 0;
}
.main {
  height: 200vh;
  min-height: 250px;
  width: 1200px;
  background: #cdcdcd;
  margin: 0 auto;
  padding: 20px;
}

<div class="main">
  Main website content
</div>

<div class="banner" style="position: fixed; width: 100%; max-width: 600px; height: 80px; background: gray; bottom: 20px; right: 20px; color: white; padding: 20px;">Banner content</div>

Вот версия в Codepen , если это проще.

Как видите, основной контент сайта по центру и реагирует до (в данном случае) 1200 пикселей, после чего ширина становится фиксированной. Баннер должен всегда располагаться внизу справа, но он должен оставаться в пределах ограничений основного содержимого сайта. Когда область просмотра меньше 1200 пикселей, это решение работает нормально, у меня, конечно, проблема в том, что на экранах шириной более 1200 пикселей баннер выходит за рамки ограничений сайта.

Как правило, это не будет Эта проблема легко решается с помощью cal c () и медиа-запроса, чтобы получить ширину области просмотра, но теперь появляются ограничения инструмента баннера:

• Я могу добавить только inline CSS через инструмент к элементу banner, нет оболочки или внутреннего элемента, на который я могу нацелиться
• Я не могу добавить CSS к сайту, на котором будет отображаться баннер
• Я не могу использовать JavaScript ни на сайте, ни в баннере
• Я никак не могу повлиять на HTML (например, я не могу поставить banner inside main

Извините за длинное вступление, но надеюсь, что это объясняет мою дилемму. Мой вопрос такой: возможно ли с помощью CSS calc() определить, когда размер моего окна просмотра превышает 1200px и добавить (половину) эту сумму к моему правому смещению без изменения смещения, когда область просмотра меньше 1200 пикселей, или просто нет решения?

Answer 1

Вот одна идея, которая полагается на использование if min() для определения максимальной ширины. Вы можете сделать это 600px (для большого экрана) или 50% (для маленького экрана), а затем отрегулировать положение с помощью translate после центрирования элемента:

body {
  margin: 0;
}
.main {
  height: 200vh;
  min-height: 250px;
  width: 1200px;
  background: #cdcdcd;
  margin: 0 auto;
  padding: 20px;
}

* {
  box-sizing:border-box;
}

<div class="main">
  Main website content
</div>

<div class="banner" style="position: fixed; width: 100%; max-width: min(50%,600px); height: 100px; background: gray; bottom: 20px; right: 0;left:0;margin:auto;transform:translate(50%);border:1px solid red; color: white; padding: 20px;">Banner content</div>

Поддержка все еще не в порядке (https://caniuse.com/#feat = mdn-css_types_min ), но в скором времени она будет доступна на Firefox и все основные браузеры будут покрыты.