Skocz do zawartości
Forum komputerowe

Automatycznie wydłużająca się nawigacja - HTML/CSS


Rekomendowane odpowiedzi

Cześć.

Jestem nowy w HTML & CSS.

Mam problem, którego nie umiem rozwiązać - jak zrobić by div "nav1" i "nav2" automatycznie się wydłużał wraz z wydłużeniem diva "content"?


Link do strony: https://zxcasd12.000webhostapp.com/

Screenshot by Lightshot

Chciałbym aby szary blok z nawigacji automatycznie się wydłużał wraz z wydłużeniem contentu.

Kod HTML:

Spoiler
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">

	</style>
</head><body>
<div id="container">
<div id="logo">
<h1>Jakiś nagłówek</h1>
</div><div id="nav1">
<a href="index.html">Strona główna</a><br/>
<a href="#">Menu 1</a><br/>
<a href="javascript:void(null);">Menu 2</a><br/>
<a href="#">- Menu 3</a><br/>
<a href="#">- Menu 4</a><br/>
<a href="#">- Menu 5</a><br/>
<a href="#">- Menu 6</a><br/>

</div><div id="content">
<h2 class="czerwony">Strona główna</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
</div><div id="nav2">
Menu 2
</div><div id="footer">
2020 &copy; TEST

</div>
</div>

</body>

</html>

 

Kod CSS

Spoiler
body
	{
		font-family: Verdana;
		font-size: 10pt;
	}
	h1, h2{
		color: white;
	}
	.czerwony{
		text-align: center;
		color: red;
	}
	figure {
		margin-left: 10px;
		margin-right: 10px;
	}

	#container
	{
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	#logo
	{
		background-color: black;
		color: white;
		text-align: center;
		padding: 15px;
	}
	#nav1
	{
		float: left;
		background-color: lightgray;
		width: 180px;
		min-height: 420px;
		padding: 10px;
	}
	#nav1 > a {
		display: block;
		padding: 5px;
		margin-top: 0px;
		margin-bottom: -15px;
		text-decoration: none;
		background-color: #ededed;
		
	}
	#nav1 > a:hover {
		background-color: #0000005e;
		color: white !important;
		
	}
	#nav1 > a:link, #nav1 > a:visited {
		color: black;
		
	}
	
	#content
	{
		float: left;
		padding: 20px;
		width: 760px;
	}
	#nav2
	{
		float: left;
		width: 180px;
		min-height: 420px;
		padding: 10px;
		background-color: lightgray;
	}
	#nav2 > a {
		display: block;
		padding: 5px;
		margin-top: 0px;
		margin-bottom: -15px;
		text-decoration: none;
		background-color: #ededed;
		
	}
	#nav2 > a:hover {
		background-color: #0000005e;
		color: white !important;
		
	}
	#nav2 > a:active, #nav2 > a:link, #nav2 > a:visited  {
		color: #000;
		
	}
	#footer
	{
		clear: both;
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
	}	

 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Dodajemy klase "flexing" obejmująca nav, content, nav

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">

	</style>
</head><body>
<div id="container">
<div id="logo">
<h1>Jakiś nagłówek</h1>
</div>
<div class="flexing">
<div id="nav1">
<a href="index.html">Strona główna</a><br/>
<a href="#">Menu 1</a><br/>
<a href="javascript:void(null);">Menu 2</a><br/>
<a href="#">- Menu 3</a><br/>
<a href="#">- Menu 4</a><br/>
<a href="#">- Menu 5</a><br/>
<a href="#">- Menu 6</a><br/>

</div><div id="content">
<h2 class="czerwony">Strona główna</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
</div><div id="nav2">
Menu 2
</div>
  </div> 
 <div id="footer">
2020 &copy; TEST

</div>
</div>

</body>

</html>

Teraz dla #nav1, #nav2, #content usuń

float:left 

a także ustaw

height: 100%

Tutaj ostylizowanie dla klasy flexing

	.flexing {
		display:flex;
		justify-content: center;

	}
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

Wiem że off top ale z racji że jesteś początkującym to takie uwagi będą dla Ciebie cenne:

- Nie stylujemy elementów po id - są od tego klasy (class), id wykorzystuje się głównie w JavaScript aby szybciej odnaleźć dany element (choć czasem jest od tego wyjątek), a class najlepiej użyć tak aby trzymać się reguły DRY (co oznacza Don't Repeat Yourself czyli twórz kod tak aby jak najmniej razy tworzyć jego kopię)

- Nie korzystamy z br-ów, czasem można je spotkać w kodzie ale są one generowane zwykle przez edytory tekstu typu WYSIWYG (What You See is What You Get, czyli taki edytor tekstu który np.: jest u nas na forum)

- Tworząc nawigację dobrze jest to wszystko wrzucić do listy bo jakby nie patrzeć to nawigacja jest listą linków, dodatkowo już na tym etapie nauczysz się czegoś co się przyda przy tak zwanej dostępności (accessibility, a11y)

Na koniec podsyłam jeszcze na szybko sklejony przykład: https://codepen.io/Mativve/pen/dypGgPB?editors=1100

Odnośnik do odpowiedzi
Udostępnij na innych stronach

@Vast Dzięki, ale niestety to nie jest to o co mi chodziło.  Wybacz jeśli niejasno napisałem.

Chciałbym aby była stała wysokość diva "nav1" i "nav2" np. min-height: 600px; i gdy zawartość contentu wydłuża się w dół, to automatycznie wydłuża się div nav1 i nav2

Domyślnie strona wygląda tak: Screenshot by Lightshot

Kiedy dodam zawartość contentu, która wykracza poza min-height to pod divami nav1 i nav2 zostaje taki odstęp: Screenshot by Lightshot

A chciałbym uzyskać efekt, że div nav1 i nav2 automatycznie wydłuża się do stopki.

Link do strony: https://zxcasd12.000webhostapp.com/

Aktualny kod HTML: 

Spoiler
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">

	</style>
</head><body>
<div id="container">
<div id="logo">
<h1>Jakiś nagłówek</h1>
</div>
<div class="flexing">
<div id="nav1">
<a href="index.html">Strona główna</a><br/>
<a href="#">Menu 1</a><br/>
<a href="javascript:void(null);">Menu 2</a><br/>
<a href="#">- Menu 3</a><br/>
<a href="#">- Menu 4</a><br/>
<a href="#">- Menu 5</a><br/>
<a href="#">- Menu 6</a><br/>

</div><div id="content">
<h2 class="czerwony">Strona główna</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id nibh. Lectus vestibulum mattis ullamcorper velit sed. Commodo elit at imperdiet dui accumsan. Massa eget egestas purus viverra accumsan in. Urna nunc id cursus metus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Luctus venenatis lectus magna fringilla urna. Ipsum dolor sit amet consectetur. Leo vel orci porta non. Consectetur adipiscing elit duis tristique. Dictum varius duis at consectetur lorem. Volutpat est velit egestas dui id ornare. Vehicula ipsum a arcu cursus vitae congue. Urna nunc id cursus metus aliquam eleifend mi in. Amet volutpat consequat mauris nunc. Nibh nisl condimentum id venenatis a condimentum vitae. Volutpat odio facilisis mauris sit amet massa vitae tortor. Est velit egestas dui id.
</div><div id="nav2">
Menu 2
</div>
  </div> 
 <div id="footer">
2020 &copy; TEST

</div>
</div>

</body>

</html>

 

Aktualny kod CSS

Spoiler
body
	{
		font-family: Verdana;
		font-size: 10pt;
	}
	h1, h2{
		color: white;
	}
	.czerwony{
		text-align: center;
		color: red;
	}
	figure {
		margin-left: 10px;
		margin-right: 10px;
	}

	#container
	{
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	#logo
	{
		background-color: black;
		color: white;
		text-align: center;
		padding: 15px;
	}
	#nav1
	{
		height: 100%;
		background-color: lightgray;
		width: 180px;
		min-height: 420px;
		padding: 10px;
	}
	#nav1 > a {
		display: block;
		padding: 5px;
		margin-top: 0px;
		margin-bottom: -15px;
		text-decoration: none;
		background-color: #ededed;
		
	}
	#nav1 > a:hover {
		background-color: #0000005e;
		color: white !important;
		
	}
	#nav1 > a:link, #nav1 > a:visited {
		color: black;
		
	}
	
	#content
	{
		padding: 20px;
		width: 760px;
	}
	#nav2
	{
		height: 100%;
		width: 180px;
		min-height: 420px;
		padding: 10px;
		background-color: lightgray;
	}
	#nav2 > a {
		display: block;
		padding: 5px;
		margin-top: 0px;
		margin-bottom: -15px;
		text-decoration: none;
		background-color: #ededed;
		
	}
	#nav2 > a:hover {
		background-color: #0000005e;
		color: white !important;
		
	}
	#nav2 > a:active, #nav2 > a:link, #nav2 > a:visited  {
		color: #000;
		
	}
	#footer
	{
		clear: both;
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
	}
	.flexing {
		display:flex;
		justify-content: center;
	}

 

3 godziny temu, Mativve napisał:

- Nie stylujemy elementów po id - są od tego klasy (class), id wykorzystuje się głównie w JavaScript aby szybciej odnaleźć dany element (choć czasem jest od tego wyjątek), a class najlepiej użyć tak aby trzymać się reguły DRY (co oznacza Don't Repeat Yourself czyli twórz kod tak aby jak najmniej razy tworzyć jego kopię)

4 godziny temu, Mativve napisał:

- Nie korzystamy z br-ów, czasem można je spotkać w kodzie ale są one generowane zwykle przez edytory tekstu typu WYSIWYG (What You See is What You Get, czyli taki edytor tekstu który np.: jest u nas na forum)

 

- Tworząc nawigację dobrze jest to wszystko wrzucić do listy bo jakby nie patrzeć to nawigacja jest listą linków, dodatkowo już na tym etapie nauczysz się czegoś co się przyda przy tak zwanej dostępności (accessibility, a11y)

O tym nie wiedziałem. Dzięki wielkie za wskazówki. 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@GanHUNTER Jeśli dobrze zrozumiałem to efekt będziesz miał tutaj:

https://codepen.io/Mativve/pen/oNzbOJm?editors=1100

Wystarczyło w .main .row zmienić align-items: stretch; (rozciągnięty na wysokość) na align-items: flex-start; (przyklejony do góry i wysokość elementu = ilości zawartości wewnątrz.

Odnośnik do odpowiedzi
Udostępnij na innych stronach

@Mativve 

Wielkie dzięki, ale muszę odrzucić twoje rozwiązanie.

Mam zadany taki al'a projekt do szkoły, w którym mamy zrobić stronę o dowolnej tematyce. I projekt musi być wykonany na podstawie takiego kodu, jaki ja wysłałem w 1 poście (to znaczy możemy go modyfikować, ale nie możemy go całkowicie zmienić) - nie pytaj dlaczego, nasz nauczyciel czci zasady programowania z 2k00 roku. XD

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@GanHUNTER Rozumiem, niestety też miałem okazję doświadczyć poziomu nauczania w technikum informatycznym. Na szczęście miałem takich nauczycieli co nauczali tych co nie umieli tak aby zdać a Ci z wiedzą robili bardziej zaawansowane projekty bo przecież jak się znasz na rzeczy to egzamin zdasz.

Także nie ma co winić nauczycieli za taką podstawę programową bo ta jest narzucana z góry - chociaż gdyby od uczniów pozbierali podpisy i sami nauczyciele się sprzeciwili i trochę odnowili podstawę programową to byłby sukces.

Wracając do tematu bo trochę od niego odbiegłem - to w takim razie co możesz zrobić i edytować? Jak chcesz to podeślij mi screen zadania w wiadomości prywatnej a odpowiedzi udzielę nadal tutaj.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
2 minuty temu, Mativve napisał:

Wracając do tematu bo trochę od niego odbiegłem - to w takim razie co możesz zrobić i edytować?

Wszystko mogę zrobić i edytować (tzn. dodawać kolejne nowe divy, zmieniać ich wygląd CSS, itp.) lecz wszystko ma się opierać na divach: (logo, nav1, nav2, container, content, footer). 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@GanHUNTER Ja bym to zrobił tak:

https://codepen.io/Mativve/pen/gOwPNXz?editors=0100

i żeby nie było że to jest byle jaki przykład, trzeba się przenieść w czasie tak do 2013 😄  ->https://stackoverflow.com/questions/16404485/getting-inline-block-elements-height-to-fill-the-parent

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@GanHUNTER

Polecamy się na przyszłość 🙂

Tak dla przypomnienia:

Mój jest napisany bardziej pod stary sposób (taki w jaki szkoły mogą uczyć) a Vast's został użyty nowy - flex którego w "podręcznikach" nie ujrzymy 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
×
×
  • Dodaj nową pozycję...