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

【问题标题】：Converting fixed container to fluid.... how do I set the height?将固定容器转换为流体....如何设置高度？
【发布时间】：2023-03-03 21:21:02
【问题描述】：

更新： 对不起大家的困惑......我实际上是想问一下缩放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），而不给父母设置高度？

【问题讨论】：

你的问题让我很困惑：你想让孩子的身高是未知身高的百分比吗？ xx% 的未知 = 未知，不是吗？
使用固定宽度，因为人们可能认为你指的是position: fixed ;)
这也让我感到困惑，你回答了你自己的问题不是吗？就像 ptriek 说的，未知高度的百分比 = 未知......就这么简单。
抱歉给大家带来了困惑...我刚刚更新了我的帖子。
@dadadey：仍然不清楚，保持 div 的比例，而 div 的宽度调整是什么意思。无论如何，通过 CSS 是不可能的，所以将高度设置为宽度的 60%，在这种情况下，您将需要使用 Javascript。

标签： html css fluid-layout

【解决方案1】：

你的问题还不够清楚，但是你要知道，只要父元素被定位并带有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/

【讨论】：

【解决方案2】：

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

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

喜欢

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

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

【讨论】：