Как с помощью calc найти эту ширину?

Question

[Alexey10]

Ребят, всем привет.
Такой вопрос возник, нужно сделать с помощью css.
Зеленый квадрат на скрине это контентная область сайта, она равна 1360px .
Красный фон, это отдельный блок (position: absolute;) который лежит на заднем плане контента (то есть контентная область никак не зависит от заднего блока). И его ширина 55.5%. Мне нужно найти ширину контента который указал на скрине. Мне нужно, чтобы при уменьшении ширины окна браузера, ширина контентной части тоже подстраивалась, и всегда была по ширине красного блока. Надеюсь нормально объяснил. Помогите пожалуйста, я думаю что можно как-то сделать с помощью calc();
Всем спасибо за ответ))

Comments

[Andrew]

а этому блок нельзя ширину задать равную тем же 55.5%(55.5vw)?

[Alexey10]

Так можно сделать если шарина экрана равна или меньше 1360px. А если больше, то ширина контента всегда 1360px, а ширина экрана больше, и я не могу поймать именно ширину части контента (на скрине). Там я так понимаю должна быть формула по поиску той ширины именно

[Сергей Горячев]

Я может не в тему, но не лучше ли так решить саму задачу?
И не потребуется хитровыезженных вычислений на кальке.

[Alexey10]

Сергей Горячев, это вариант я знаю, но именно в этом проекте нельзя так сделать. Долго рассказывать

[Сергей Горячев]

Alexey10, сделай песочницу, поломать голову можно, но воспроизводить код геморроя много.

[Alexey10]

Сергей Горячев, https://jsfiddle.net/9kgadqsy/

Answer 1

[Danila]

width: calc(((100vw - 1360px) / 2) + (1360px * 0.55))

Comments

[Alexey10]

Красава. Спасибо большое. Идею дал хорошую. Я тут чуть чуть переписал, вот так работает
width: calc(55.5vw - ((100vw - 1360px) / 2))

[Сергей Горячев]

Вот я тоже копал в сторону width: calc(((100vw - 1360px) / 2)..., но видимо было не туда.

[Alexey10]

Сергей Горячев, Спасибо большое, что помогал =)

Answer 2

[sumrakx]

Я бы не занимался этой рутиной напрямую. Попробуй решить данную задачу с помощью css фреймворка Bootstrap. Иначе много костылей еще огребешь. В Bootstrap глянь grid and layout сетку. Сильно упростит жизнь.

Answer 3

[Анатолий Куликов]

"Красный блок" можно вложить дочерним в блок "зеленый квадрат", указать родителю position: relative, а для красного блока задать ширину таким образом:

width: calc(100% * 0.555);

Comments

[Андрей Охотников]

а зачем в данном случае calc если можно просто задать width: 55,5%; :)

[Alexey10]

нельзя так сделать, ты не понял задачу =)

[Анатолий Куликов]

Андрей Охотников, согласен, только до меня сейчас дошло, что я не на тот вопрос ответил. Насколько я понял, смысл в том, что нужно вычислить ширину области, которая получается от наложения зеленого и красного, т.е. принадлежит им обоим.

[Анатолий Куликов]

Alexey10, да я уже понял, что не понял. Юзай js - получай размер экрана, вычитай из него размеры и будет тебе счастье.

[Alexey10]

Анатолий Куликов, Андрей Охотников,
вот решение, вдруг пригодиться =)

width: calc(55.5vw - ((100vw - 1360px) / 2))

Answer 4

[Александра Маслова]

width: calc(100% - 80px);

Comments

[Alexey10]

не совсем понял? это что ?

[Alexey10]

вот решение, вдруг пригодиться =)

width: calc(55.5vw - ((100vw - 1360px) / 2))

Answer 5

[Medin K]

jsfiddle.net/L7zb2crk