Procentowa wysokość diva nie działa.

pytanie zadane 7 kwietnia 2017 w HTML i CSS przez Snich Nowicjusz (220 p.)
edycja 7 kwietnia 2017 przez Arkadiusz Waluk

<!DOCTYPE HTML>
<html lang="pl">

<head>
<meta charset="utf-8">
<meta name="description" content="Początkowa strona testowa" />
<meta name="keywords" content="slowa,kluczowe" />
</head>

<style>
#box
{
width: 63%;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;

}

#one
{
float:left;
height:50%;
width:33%;
background-color:yellow;
}

#two
{
float:left;
height:50%;
width:33%;
background-color:orange;
}

#three
{
float:left;
height:50%;
width:33%;
background-color:purple;
}

#non
{
clear:both;
}

#four
{
float:left;
height:50%;
width:33%;
background-color:pink;
}

#five
{
float:left;
height:50%;
width:33%;
background-color:red;
}

#six
{
float:left;
height:50%;
width:33%;
background-color:black;
}
</style>

<body>
 <div id="box">
     <div id="one">
     
     </div>
     
     <div id="two">
     </div>
     
     <div id="three">
     </div>
     
     <div id="non">
     </div>
     
     <div id="four">
     </div>
     
     <div id="five">
     </div>
     
     <div id="six">
     </div>
 </div>
</body>

</html>

Jeżeli zamienię wysokość box-a na procentową to wszystko znika. Dlaczego?

komentarz 7 kwietnia 2017 przez Arkadiusz Waluk Ekspert (289,130 p.)

Pamiętaj na przyszłość, że kod na forum wstawiamy w przeznaczony do tego bloczek.

3 odpowiedzi

odpowiedź 7 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

odpowiedź 7 kwietnia 2017 przez Dzemtenjem Bywalec (2,660 p.)

Tak jak już wspomniała Noemi wysokość rodzica musi być ustalona. Lecz możesz dać do znacznika html wysokość 100% która przyjmie wysokość okna przeglądarki, do body wysokość 100%, i będzie działało. Jeżeli oczywiście Twoim zamiarem jest ustalanie procentowej wysokości w stosunku do wysokości okna przeglądarki.

komentarz 10 kwietnia 2017 przez Snich Nowicjusz (220 p.)

Rozumiem. Myślałem że przeglądarka ma już ustalone rozmiary. Dzięki.

odpowiedź 7 kwietnia 2017 przez WireNess Stary wyjadacz (11,240 p.)

Nie wiem jak Ci to wytłumaczyć więc pokaże Ci jak ja rozwiązuje ten problem :)

HTML::

<div id="rodzic">

    <div id="dziecko"></div>

</div>

CSS::

#rodzic
{
    width: 1000px;
    height: 1200px;
}
#dziecko
{
    width: 50%;
    height: 10%;
}

Div dziecko jest potomkiem rodzica więc jeżeli rodzic ma szerokość 1000px to ustawiając jego potomkowi 50% będzie miał 500px! POTOMEK ZAWSZE MUSI MIEĆ PUNKT ODNIESIENIA! Nie możesz ustawić procentów jeżeli nie jest ustawiona wartość początkowa!