Почему divs теряют способность выводить на%, когда внутри других divs?

Question

Почему <divs> теряют способность выводить ширину и высоту в% (процентах), когда они находятся внутри других <divs>?

У меня есть <div id="2"> и <div id="3"> внутри <div id="1">.

<div id="1"> Ширина и высота установки установлены в% (в процентах).

Как прийти <div id="2"> и <div id="3"> Высота не работает, когда я установил их в%? (Они работают с точек (пикселей), хотя.)

Answer 1

Используйте position:relative в Div1 их только внутренние Див-х будет принимать высоту% и DIV относительно родительского

.parent { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 100px; 
 
    background: #eee; 
 
} 
 
#div1 { 
 
    position: relative; 
 
    width: 80%; 
 
    background: #f00; 
 
    height: 80%; 
 
    display: inline-block; 
 
} 
 
#div2 { 
 
    width: 30%; 
 
    background: #0f0; 
 
    height: 30%; 
 
    display: inline-block; 
 
} 
 
#div3 { 
 
    width: 30%; 
 
    background: #00f; 
 
    height: 30%; 
 
    display: inline-block; 
 
}

<div class='parent'> 
 
    <div id="div1"> 
 
    <div id="div2"> 
 
    </div> 
 
    <div id="div3"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

% относительна блок измерения, поэтому вам нужно установить любой родитель на абсолютный блок, например px , например, если ваш div1 пуст, тогда div1 имеет 100% width and 0% height, в этом случае ваш div2 and div3 не будет работать.

Установите свой html, ширину и высоту кузова на 100%, и ваш все div должен работать правильно попробуйте этот код;

body, html{ 
    height: 100%; 
    background: #eee; 
} 

.div1{ 
    width: 100%; 
    height: 100%; 
    background: #ccc; 
} 

.div2{ 
    width: 50%; 
    height: 50%; 
    background: #888; 
    margin-left: 50%; 
} 

.div3{ 
    width: 50%; 
    height: 50%; 
    background: #fff; 
} 

SEE WORKING EXAMPLE