Wysokość 100% dla wszystkich elementów

Witam
mam problem z tym że karty mimo dodania klasy h-100 w bootstrapie nie mają jednakowej wysokości. link
kod

<div class="tab-pane fade" id="nav-dfssdf" role="tabpanel" aria-labelledby="nav-dfssdf-tab">
<div class="row text-center g-4 align-items-center justify-content-center">
<div class="col-md card ms-2 me-2 h-100 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/lol.png" alt="dfssdf" width="90px" class="pb-2"><h3>lorem ipsum 1 fdsaffds dasdffd</h3>10ąc<br>126k</li>
<li class="list-group-item border-primary">8 Ga</li>
<li class="list-group-item border-primary">012jś</li>
<li class="list-group-item border-primary">Para8</li>
<li class="list-group-item border-primary">P8oa</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-md card ms-2 me-2 h-100 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/lol.png" alt="dfssdf" width="90px" class="pb-2"><h3>lorem ipsum 1 dfsfds</h3>10ąc<br>126k</li>
<li class="list-group-item border-primary">8 Ga</li>
<li class="list-group-item border-primary">012jś</li>
<li class="list-group-item border-primary">Para8</li>
<li class="list-group-item border-primary">P8oa</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-md card ms-2 me-2 h-100 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/lol.png" alt="dfssdf" width="90px" class="pb-2"><h3>lorem ipsum 1 fdsdsf</h3>10ąc<br>126k</li>
<li class="list-group-item border-primary">8 Ga</li>
<li class="list-group-item border-primary">012jś</li>
<li class="list-group-item border-primary">Para8</li>
<li class="list-group-item border-primary">P8oa</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-md card ms-2 me-2 h-100 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/lol.png" alt="dfssdf" width="90px" class="pb-2"><h3>lorem ipsum 1 js dsfds asdfjhs dfsfds dsf</h3>10ąc<br>126k</li>
<li class="list-group-item border-primary">8 Ga</li>
<li class="list-group-item border-primary">012jś</li>
<li class="list-group-item border-primary">Para8</li>
<li class="list-group-item border-primary">P8oa</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-md card ms-2 me-2 h-100 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/lol.png" alt="dfssdf" width="90px" class="pb-2"><h3>lorem ipsum 1 dss/h3>10ąc<br>126k</li>
<li class="list-group-item border-primary">8 Ga</li>
<li class="list-group-item border-primary">012jś</li>
<li class="list-group-item border-primary">Para8</li>
<li class="list-group-item border-primary">P8oa</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-md card ms-2 me-2 h-100 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/lol.png" alt="dfssdf" width="90px" class="pb-2"><h3>lorem ipsum 1jds jdsj sdjd sjjds</h3>10ąc<br>126k</li>
<li class="list-group-item border-primary">8 Ga</li>
<li class="list-group-item border-primary">012jś</li>
<li class="list-group-item border-primary">Para8</li>
<li class="list-group-item border-primary">P8oa</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
</div>
</div>

Wrzuć to na jakiś serwis typu code pen, żeby się to dało sprawdzić.

Generalnie height: 100% działa tylko* wtedy, kiedy wszystkie elementy nadrzędne mają ustawiony jakiś height. (Nie do końca to prawda, ale tak w skrócie). Zapewne u Ciebie jakiegoś brakuje i to podejrzewam, że w kodzie, którego nie wrzuciłeś.

Więc jeszcze raz - wrzuć powtarzalny przykład z pobranym już bootstrapem na jakiś serwis to zbadamy.

Sformatuj tego HTMLa bo można raka dostać, ale najprawdopodobniej jak mówi dzek parent nie ma wysokości przez co 100% wysokosci parenta która nie jest okreslona daje Ci nieokreśloną wartość.

to jak bede w domu to wrzuce

dzek69 napisał(a):

Wrzuć to na jakiś serwis typu code pen, żeby się to dało sprawdzić.

Generalnie height: 100% działa tylko* wtedy, kiedy wszystkie elementy nadrzędne mają ustawiony jakiś height. (Nie do końca to prawda, ale tak w skrócie). Zapewne u Ciebie jakiegoś brakuje i to podejrzewam, że w kodzie, którego nie wrzuciłeś.

Więc jeszcze raz - wrzuć powtarzalny przykład z pobranym już bootstrapem na jakiś serwis to zbadamy.

link
na codepenie cos mi nie dzialalo, lapcie na jsbin :D

ktoś już rozwiązał problem?

spróbuj sam, rady ode mnie i @dzek69 dostałeś

odkurzaczyk napisał(a):

ktoś już rozwiązał problem?

@odkurzaczyk: np. mozesz dodać d-flex do:

<div class="tab-pane fade active show d-flex" id="nav-fivem" role="tabpanel" aria-labelledby="nav-fivem-tab">

zmienić align-items-center na align-items-stretch

<div class="row text-center g-4 align-items-stretch justify-content-center ">

oraz pozbyć się h-100

<div class="col-xl card ms-2 me-2 rounded-0 border border-primary hvr-float" style="width: 15rem;">

Cały kod

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="pt-5">
<h1 class="text-center pb-4">Sample website</h1>
<div class="tab-content p-1 " id="nav-tabContent">
<div class="tab-pane fade active show d-flex " id="nav-fivem" role="tabpanel" aria-labelledby="nav-fivem-tab">
<div class="row text-center g-4 align-items-stretch justify-content-center ">
<div class="col-xl card ms-2 me-2 rounded-0 border border-primary hvr-float" style="width: 15rem; ">
<ul class="list-group list-group-flush ">
<li class="list-group-item border-primary"><img src="img/fi.png" width="75px" class="pb-2"><h3>lorem ipsum dolor sit Amet constecur aadipisicing elit lorem</h3>3,3,3,3,3,3,3<br>3,3,3,3,3,3,3</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-xl card ms-2 me-2 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/fi.png" width="75px" class="pb-2"><h3>abcd efghh</h3>3,3,3,3,3,3,3<br>3,3,3,3,3,3,3</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-xl card ms-2 me-2 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/fi.png" width="75px" class="pb-2"><h3>abcd efghh</h3>3,3,3,3,3,3,3<br>3,3,3,3,3,3,3</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-xl card ms-2 me-2 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/fivem.png" alt="FiveM" width="75px" class="pb-2"><h3>abcd efghh</h3>3,3,3,3,3,3,3<br>3,3,3,3,3,3,3</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-xl card ms-2 me-2 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/fivem.png" alt="FiveM" width="75px" class="pb-2"><h3>abcd efghh</h3>3,3,3,3,3,3,3<br>3,3,3,3,3,3,3</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
<div class="col-xl card ms-2 me-2 rounded-0 border border-primary hvr-float" style="width: 15rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item border-primary"><img src="img/fivem.png" alt="FiveM" width="75px" class="pb-2"><h3> jdjfdsjfds ds fds fdsfds gdff Fisfdfdfdf</h3>3,3,3,3,3,3,3<br>3,3,3,3,3,3,3</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary">12 3 4 5 6 7 8 9 ś</li>
<li class="list-group-item border-primary"><a href="#" class="btn bhtb text-white rounded-0">Przycisk</a></li>
</ul>
</div>
</div>
</div>
</div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
  <section id="oferta">
</body>
</html>