Automatyczne równanie divów będących obok siebie, używając CSS

Question

Czołem, brygada. ;) Zacząłem robić swoją stronę i natknąłem się na dość trywialny problem. Mam obok siebie 2 divy: lewe menu, oraz po prawej- content.

Nie chcę przypisywać wysokości na sztywno, dla menu, no bo jak dodam więcej zawartości do diva content, to menu nie "podąży" za contentem i ten się rozleje. Chciałbym, aby menu, były spójne z contentem, bez żadnych przerw.

https://www.youtube.com/watch?v=E3Nr6shFy3Q

W tym filmiku krecik opisuje (Dzięki i pozdrawiam!), jak to zrobić, no ale mam problem- menu wjechało mi na stopkę, którą mam na samym dole. Nie da się jakoś z automatu przypisać w menu, że: height = content.height;

?? :)

Nie chcę używać Java Script, bo na razie uczę się podstaw, a nie lubię wpisywać rzeczy na sztywno, lubię mieć wszystko rozszerzalne.

 

PS Jeszcze jedno mnie nurtuje: Skoro menu wjechało na stopkę, dlaczego nie wjechał na nią także content?

Answer 1

Zrób div conteiner i pamiętaj o float:left; clear:both;

Answer 2

Wrzuć oba divy do wspólnego diva któremu nadasz min-height (wartość którą będzie miał normalnie, ale możliwą do automatycznego powiększenia) a dwóm divom wewnątrz nadaj height: 100%;

W ten sposób oba divy zawsze będą miały jednakową wysokość.

Kod HTML:

<div class="container">
   <div class="menu">
   </div>

    <div class="content">
    </div>   
</div>

KOD CSS:

.container {
min-width: 500px;
}

.menu, .content {
height: 100%;
}

 

Comments

Nie wpadłem na to, natomiast po zastosowaniu okazało się, że te  height 100% dotyczy zawartości diva, a nie jego otoczenia.

Co cieakwe, dałem np height 20% i div wciąż był taki sam.

Albo coś schrzaniłem. :)

---

wyślij kod ;)

---

Okey dzięki za pomoc. Podeślę jutro wieczorem, jak wrócę z roboty. :)

Answer 3

Poczytaj o flexboxie:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/