• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Niedziałające dziedziczenie

VPS Starter Arubacloud
0 głosów
169 wizyt
pytanie zadane 19 kwietnia 2018 w HTML i CSS przez misza1597 Nowicjusz (190 p.)

Hej :) tak jak w temacie, dlaczego element .dziecko1 nie dziedziczy właściwości height po swoim elemencie nadrzędnym .rodzic, tylko zawija się wskazując zerową wysokość. Poniżej wrzucam kod: 

<!DOCTYPE html>
<html lang="pl">
	<head>
		<title>EXAMPLE</title>
		<style>
			.rodzic {
				overflow: auto;
				width: 100%;
			}	
			div:not(.rodzic) {
				box-sizing: border-box;
				width: 50%;
			}
			.dziecko1 {
				float: left;
				height: 100%;
			}
			.dziecko2 {
				float: right;
			}
		</style>	
	</head>
	<body>
		<div class="rodzic">
			<div class="dziecko1">
			</div>
			<div class="dziecko2">
				<p>Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem specjalnie (humorystyczne wstawki itd).</p>
			</div>
		</div>
	</body>
</html>

 

2 odpowiedzi

+1 głos
odpowiedź 19 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 19 kwietnia 2018 przez misza1597
 
Najlepsza
Musiałbyś nadać jakieś height dla rodzica, bo to względem niego jest wyliczane height dziecka, ale dla domyślngo height: auto to 100% z auto jest zerem.

Ale pomijając to to może lepiej po prostu zrób to na flex? Na przykład: https://codepen.io/Tomek_Sochacki/pen/NMPMRz

(tak na szybko, dodałem też bordery żebyś widział, że oba "boxy" mają równą wysokość).
komentarz 19 kwietnia 2018 przez misza1597 Nowicjusz (190 p.)
dziękuje za pomoc :)
+1 głos
odpowiedź 19 kwietnia 2018 przez Apiczkens Początkujący (390 p.)

Nie dziedziczy ponieważ nie ma czego dziedziczyć (wysokość nie jest zdefiniowana w rodzicu, tylko szerokość). Dziecko-2 ma wysokość ustaloną poprzez wypełniający diva tekst. Zobacz sobie taki kod (usuń komentarz z height) i wszystko będzie wiadome: 

<!DOCTYPE html>
<html lang="pl">
    <head>
        <title>EXAMPLE</title>
        <style>
            .rodzic {
                overflow: auto;
                width: 100%;
                /*height: 400px;*/
                background: red;
            }   
            div:not(.rodzic) {
                box-sizing: border-box;
                width: 50%;
            }
            .dziecko1 {
                float: left;
                height: 100%;
                background: green;
            }
            .dziecko2 {
                float: right;
            }
        </style>  
    </head>
    <body>
        <div class="rodzic">
            <div class="dziecko1">
              teksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
            </div>
            <div class="dziecko2">
                <p>Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem specjalnie (humorystyczne wstawki itd).</p>
            </div>
        </div>
    </body>
</html>

 

komentarz 19 kwietnia 2018 przez misza1597 Nowicjusz (190 p.)
Dzięki za odpowiedź :)

Podobne pytania

0 głosów
1 odpowiedź 335 wizyt
0 głosów
2 odpowiedzi 162 wizyt
pytanie zadane 12 marca 2018 w HTML i CSS przez jaku9987 Nowicjusz (180 p.)
0 głosów
3 odpowiedzi 618 wizyt
pytanie zadane 22 maja 2015 w HTML i CSS przez damianmisztal Gaduła (4,730 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...