Сделать DIV со 100% родительского DIV, не зная высоту родителя и держать его отзывчивым

У меня есть такой код:Сделать DIV со 100% родительского DIV, не зная высоту родителя и держать его отзывчивым

<body> 
<div class="parent"> 
<div class="children"> 
Some content here 
</div> 
</div> 
</body>

И это CSS:

body {width:100%;height:100%} 
.parent{background-color: grey;} 
.children{width: 90%; text-align: justify;}

Я хочу, чтобы сделать высоту children равной ширине parent. К сожалению - я не знаю почему. Я пытался посмотреть в Интернете, пробовал разные решения, такие как children{width: 90%; text-align: justify;height: 100%;}, но они не работают. Я знаю, что я могу использовать таблицу вместо этого второго div, но тогда этот сайт не будет реагировать на более мелкие устройства, что очень важно для меня. Какие-либо предложения?

источник

2015-02-27 TN888

Вы хотите совместить высоту с шириной ?? Для чего? – ImAtWar

@ImAtWar Это очень важно для меня сделать некоторые операции с iframe. Это не вопрос этого вопроса. – TN888

Используйте 'padding-top: 100%' трюк. Я уверен, что есть дубликат. –

Вы можете сделать это в CSS 3 с видовыми единицами (каждый оч.сл. составляет 1% от ширины окна просмотра):

#parent { 
 
    position: relative; 
 
    background: #aaa; 
 
    margin: 10px; 
 
    width: 50%; 
 
} 
 

 
#child1 { 
 
    height: 100px; 
 
    background: #333; 
 
    width: 100px; 
 
    margin: 10px; 
 
} 
 
#child2 { 
 

 
    height: 50vw; 
 
    width: 100%; 
 
    background: #f00; 
 
} 
 
}

<div id="parent"> 
 
    <div id="child1"></div> 
 
    <div id="child2"></div> 
 
</div>

Загвоздки вы должны знать, какой процент видового экрана вашего родителя, хотя это не должно быть слишком большой проблемой, если вы пытаетесь сделать ваш дизайн отзывчивым.

источник

2015-02-27 18:13:06

Я изначально не понимал, что вы просили; изменил мой ответ соответственно. –

В прямом CSS нет способа ссылаться на значения свойств других элементов. Чтобы ребенок был высотой ширины родителя, вам нужно будет использовать javascript.

Когда страница выполнена рендерингом, вам нужно будет захватить ширину родительского div с помощью javascript и установить высоту дочернего элемента, используя это значение.

источник

2015-02-27 18:17:11 Bikerdan

Большая часть вашего ответа неверна. –

@SalmanA: Пожалуйста, уточните ... – Bikerdan

Пример: если родитель имеет определенную высоту, вы можете сделать его равной высоты, указав 'height: 100%' в прямом CSS. –

Сделать DIV со 100% родительского DIV, не зная высоту родителя и держать его отзывчивым

ответ

Смежные вопросы