Question

使用bootstrap 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%;
}

Answer 1

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

min-height:300px;

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

Answer 2

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

刚刚将您的fieldset类填充更改为10％

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

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

Answer 3

纯粹的JS解决方案：

你可以进行快速比较，然后通过fieldset标签进行两次高度样式循环，

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

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做它会更优雅，但这样可以。

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

3 个答案: