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

Question

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

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

我的fiddle：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%;
}

Answer 1

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

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

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

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

Answer 2

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

min-height:300px;

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

Answer 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 来做会更优雅，但这会起作用。

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

How to set element height but stay responsive?

css

responsive-design

twitter-bootstrap