html - 将固定容器转换为流体....如何设置高度？

Question

更新： 对不起大家的困惑......我实际上是想问一下缩放div高度的最佳做法是什么？如果我将 200px 宽度和 300px 高度转换为可缩放的 div，它将是 20% 的宽度。我如何能够缩放高度？就像...如何在不使用 px 的情况下使其保持比例？有没有一种方法可以根据宽度设置高度？说，使用 50% 的宽度大小或类似的东西？我只需要一种方法来保持 div 的比例，而 div 调整宽度...

---

我有一个需要保持在固定像素中的父容器。但是，我希望所有子 div 都是流畅的。但是在转换高度时我有点困惑。

假设我的代码曾经是这样的：

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

我将孩子变成流体的新代码是这样的：

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

有没有办法以百分比设置孩子的高度（在本例中等于 300px），而不为父母设置高度？

Answer 1

Your question is not clear enough, but you need to know that as long as the parent element is positioned and with height: auto, you can set the child's height to 100%:

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

Fiddle: http://jsfiddle.net/7wxqE/

Further reading:

Now, if you want more than one floated child inside the parent, let's say 3 columns you will need to float the child and parent and add position: relative to the parent and children:

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

Fiddle: http://jsfiddle.net/4ntn5/

Answer 2

我不知道如何在 css 中做到这一点，但我可以在 javascript 中做到这一点

1. 获取父元素的宽度
2. 计算宽度的百分比
3. 然后将计算的值应用于子元素的高度。

喜欢

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

我的事情是在 css 中没有技术可以根据父元素的宽度应用高度。我的意思是我没有从任何地方得到。