如何设置元素高度但保持响应？答案

【问题标题】：How to set element height but stay responsive?如何设置元素高度但保持响应？
【发布时间】：2015-05-28 05:01:19
【问题描述】：

将引导程序 3 与 mvc5 一起使用。我有一排带有无线电组的 5 个字段集。尽管每组中的单选按钮数量不同，但我需要字段集具有相同的高度。如果我设置了一个高度，当我转到小屏幕尺寸时，单选按钮会溢出字段集。

我尝试将高度设置为 100% 并为容器设置高度，但这只会导致同样的问题。

我的小提琴：https://jsfiddle.net/battlfrog/rkpsv0jw/1/

fieldset {
  border: 1px solid #527f03;
  padding: 0 15px 15px 15px;
  height: 100%;
}
.radio {
  width: 100%;
}

#radio-row {
  min-height: 200px;
}

#radio-row fieldset {
    height: 100%;
}

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案1】：

如果您只是希望每个字段集具有相同的高度，为什么不直接使用

min-height:300px;

fieldset {
    border: 1px solid #527f03;
    padding: 0 15px 15px 15px;
    min-height: 300px;
}

【讨论】：

我正在这样做，但出于某种原因认为这是一个坏主意。它现在似乎正在工作，所以我将继续使用它。谢谢。

【解决方案2】：

在% 中设置填充对我有用。:)

刚刚将您的字段集类填充更改为 10%

fieldset {
    border: 1px solid #527f03;
    padding: 10%;
    height: 100%;
}

https://jsfiddle.net/rkpsv0jw/7/

【讨论】：

好的，我再次添加了所有字段集以进行验证，并且..忽略响应 -fieldset 类..我正在尝试其他方法并忘记删除
抱歉，字段集的高度仍然不同。

【解决方案3】：

纯JS解决方案：

您可以进行快速比较，然后通过您的字段集标签循环两次高度样式，

这里有一些可以解决的代码：

var fieldsets = document.querySelectorAll('fieldset')
var highest=0;
var b=0;
for (var i = 0; i<fieldsets.length ; i++){
 var a=fieldsets[i].offsetHeight;
 if(a<b){highest = b} else {highest = a};
 b = a;    
}
 for (var i = 0; i<fieldsets.length ; i++){
    fieldsets[i].style.height = highest + 'px'
}

虽然使用 forEach 会更优雅，但这会起作用。

【讨论】：