Automatyczne dopasowanie wysokości kilku div'ów

Question

Witam

Mam przykładowo taki kod:

<div id="container">
	<div id="sidebar"></div>
	<div id="content"></div>	
</div>

 

"sidebar" i "content" są ustawione obok siebie. Chciałbym aby ich wysokość była zawsze równa wysokości najdłuższego elementu. Czyli np. gdy do "content" dodam jakąś zawartość, która zwiększy jego długość, to długość "sidebar" dopasowuje się automatycznie do "content".

Answer 1

Można to zrobić w CSS. Dodaj do stylów tych divów które będą obok siebie takie linijki ( w CSS )

overflow:hidden;
padding-bottom: 20000px;
margin-bottom: -20000px;

Daj tez do diva #container linię: overflow:hidden; podobnie jak do divów leżących obok siebie.

Niestety będziesz miał chyba problemy ze stopką, u mnie na stronie to wygląda tak: http://niekrytykretek.cba.pl/

 

 

Comments

Wypróbowałem ten sposób i wszystko działa tak jak powinno. Nie ma nawet problemu ze stopką. Pozdrawiam :)

Answer 2

Musisz w CSS ustawić, że dane divy działają na zasadzie tabeli. W takim wypadku "komórki tabeli" będą wyrównane jeżeli chodzi o wysokość.

#container {
    display: table;
}

#sidebar {
    display: table-cell;
    width: 100px;
    background: blue;
}

#content{
    display: table-cell;
    width: 860px;
    background: red;
}

 

Comments

Heh, kolega mnie ubiegł. :P

---

Witam.

W jaki sposób podkreślasz składnie css?

Answer 3

Zrobiłem coś w takim stylu, demo w sumie to dzięki twojemu pytaniu dowiedziałem się czegoś nowego. :D A więc tak ustawiasz w #container display: table; (tabela) a #sidebar oraz #content na display: table-cell; (komórka tabeli). Dzięki temu niezależnie od zawartości, długość zawsze powinna być równa.

 

Answer 4

Jeżeli mają być równe to należy nadać pewną szerokość na container powiedzmy 1200 px a w sidebar i content ustawic width na 50% jeżeli dobrze zrozumiałem.A jeżeli chcesz zrobić bez okreslania z góry szerokości to muszisz to zrobić przez Javascript :)

Edit

Kurde cały czas myślałem, że chodzi o szerokość a nie o wysokość >.<

Comments

Nie koniecznie, jest pewien sposób w CSS.

Answer 5

Robilem cos takeigo kiedys tylko JS musisz sprawdzic wysokosc obiektu i ustawiasz go dynamicznie przez CSS

Answer 6

Możesz ustawić container na jakąś określoną szerokość a sidebar i content dać w % wtedy będą się dopasowywały

Answer 7

#container { display: flex; justify-content: stretch;  flex-direction: row; }

#sidebar, #content {  }

Jak używać flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

 

 

Answer 8

Witam.

Ja bym spróbował w css następująco:
 

<div id="container" style="display:table">

    <div id="sidebar" style="display:table-cell;"></div>

    <div id="content" style="display:table-cell;"></div>   

</div>

Ewentualnie można zrobić "trick" z tłem, np.

 

<div id="container" style="background-color:red;">

    <div id="sidebar"></div>

    <div id="content" style="background-color:blue;"></div>   

</div>