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

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

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

我的小提琴：

---

在

%

中设置填充对我有用。：）

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

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

---

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

min-height:300px;

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

纯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'
}

var fieldset=document.queryselectoral（'fieldset'））
var最高=0；
var b=0；
对于（var i=0；iI）来说，由于某种原因，我认为这是一个坏主意。它现在似乎正在工作，所以我将继续。谢谢。好的，我再次添加了所有字段集以验证和..忽略响应-字段集类别..我尝试了其他方法，但忘了移除。对不起，字段集的高度仍然不同。
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'
}