Преобразование фиксированного контейнера в жидкость, как установить высоту?

Обновление: Приносим извинения за путаницу... На самом деле я хотел спросить, как лучше всего масштабировать высоту элемента div? Если я преобразую ширину 200 пикселей и высоту 300 пикселей в масштабируемый div, его ширина составит 20%. Как я могу масштабировать высоту? Например... как мне заставить его оставаться пропорциональным, не используя px? Может быть, есть способ установить высоту в зависимости от ширины? Что-то, что говорит, используйте 50% размера ширины или что-то в этом роде? Мне просто нужен способ сохранить пропорции div при изменении размера div по ширине...

У меня есть родительский контейнер, который должен оставаться в фиксированных пикселях. Тем не менее, я хотел бы, чтобы все дочерние элементы div были гибкими. Но я немного смущен, когда дело доходит до преобразования высоты.

Допустим, мой код был таким:

#parent {width: 1000px;}
#child {width: 200px; height: 300px;}

И мой новый код, чтобы превратить ребенка в жидкость, таков:

#parent {width: 1000px;}
#child {width: 20%;}

Есть ли способ установить высоту дочернего элемента в процентах (равную 300px в этом примере), не устанавливая высоту для родителя?


html css fluid-layout
person dadadey    schedule 08.11.2013    source источник
comment
Ваши вопросы меня смущают: вы хотите, чтобы рост ребенка был в процентах от неизвестного роста? xx% неизвестного = неизвестно, нет?   -  person ptriek    schedule 08.11.2013
comment
используйте фиксированную ширину, потому что люди могут подумать, что вы имеете в виду position: fixed ;)   -  person Tom Sarduy    schedule 08.11.2013
comment
Меня это тоже смущает, вы сами ответили на свой вопрос, не так ли? Как сказал ptriek, процент неизвестной высоты = неизвестно... Вот так просто.   -  person Ruddy    schedule 08.11.2013
comment
Извините за путаницу, ребята... Я только что обновил свой пост.   -  person dadadey    schedule 08.11.2013
comment
@dadadey: Все еще неясно, что вы имеете в виду под сохранять пропорции div при изменении размера div по ширине. В любом случае, через CSS это невозможно, поэтому установите высоту, например, 60% от ширины, в этом случае вам нужно будет использовать Javascript.   -  person Tom Sarduy    schedule 08.11.2013

Ответы (2)


arrow_upward
1
arrow_downward

Ваш вопрос недостаточно ясен, но вам нужно знать, что пока родительский элемент позиционируется и с помощью height: auto вы можете установить высоту дочернего элемента на 100%:

#parent {
    height:auto; 
    width: 1000px; 
}
#child {
    height:300px; 
    width: 30%; 
}

Скрипт: http://jsfiddle.net/7wxqE/

Дальнейшее чтение:

Теперь, если вам нужно более одного плавающего дочернего элемента внутри родителя, скажем, 3 столбца, вам нужно будет плавать дочерний и родительский элементы и добавить position: relative к родителю и дочерним элементам:

#parent {
    height:auto; 
    position: relative;
    width: 1000px; 
    float: left;
}
#child {
    height:100%; 
    width:30%; 
    float: left;
    position: relative;
}

Скрипт: http://jsfiddle.net/4ntn5/

person Tom Sarduy    schedule 08.11.2013

arrow_upward
-1
arrow_downward

я не знаю, как это сделать в css, но я могу сделать это в javascript

  1. получить ширину родительского элемента
  2. рассчитать процент ширины
  3. затем примените вычисленное значение к высоте дочернего элемента.

подобно

var parentWidth = $("#parent").width();
var childHeight = Number(parentWidth) * 0.30;
$("#child").height(childHeight);

я думаю, что в css нет техники для применения высоты на основе ширины родительского элемента. Я имею в виду, я не получил ниоткуда.

person Ranjit Swain    schedule 08.11.2013