Wypełnienie diva, w zależności od szerokości przeglądarki

Question

Witam,

Posiadam w swoim projekcie nav'a, który jest tym głównym pojemnikiem, dla mniejszych obiektów w nim się znajdujących. Chciałbym aby schemat górnego/głównego nav'a wyglądał tak : 

Czyli w sumie mamy 3 nav'y o różnych klasach oraz div'a z logiem. Pytanie brzmi, jak sprawić, aby nav niebieski oraz pomarańczowy "były responsywne" względem okna przeglądarki. Jeżeli mój głowny nav, posiada 100vw; a w nim znajduje się już logo "zajmujące x pikseli". To jak sprawić aby dwa kolejne nav'y zajmowały całą resztę szerokości. W tworzeniu stron trochę siedzę i pewnie to jakieś banalne rozwiązanie, z którym się nie potrafię uporać.

Pozdrawiam serdecznie

Answer 1

width: calc(100vw - ...px);

 

 

Comments

Świetny atrybut, o to mi dokładnie chodziło. Można z łatwością dodawać paddingi, a później zsumować wszystko, odjąć od 100% i działa pięknie. Również jest wspierana przez wszystkie przeglądarki oprócz "Opera mini".

https://caniuse.com/#feat=calc

Dziękuje serdecznie za odpowiedź.

Answer 2

Dać dla loga np 25% szerokości a dla reszty 75%?

Comments

Edytowałem to jeszcze w taki sposób dzisiaj o 3:00... i elementy mi się rozjechały. Jak widać to nie dobra godzina na tworzenie stron, gdyż, po prostu zapomniałem usunąć paddingu z logo. Dziękuje za odpowiedź, leci +