如何設置元素高度但保持響應？

在mvc5中使用引導程序3。我有一排有5個無線電組的字段集。儘管每個組中的單選按鈕數量不同，但我需要將fieldset設置爲相同的高度。如果我設置了高度，當我轉到小屏幕尺寸時，單選按鈕會溢出字段集。如何設置元素高度但保持響應？

我曾嘗試將高度設置爲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%; 
}

來源

2015-05-14 BattlFrog

。如果你只是想要每個場館噸至相同的高度，爲什麼不直接使用

min-height:300px; 

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

來源

2015-05-14 22:02:24 AngularJR

我正在那樣做，並由於某種原因決定這是一個壞主意。它現在似乎在工作，所以我會和它一起去。謝謝。 – BattlFrog

在%設置填充爲我工作:)

只是改變了你的字段集類填充至10％

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

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

來源

2015-05-14 21:50:58

好吧，我再次加入所有的fieldset來驗證和..ignore responsive -fieldset分類..我正在嘗試別的東西，忘了刪除 –

對不起，字段集仍然是不同的高度。 – BattlFrog

純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做它會更優雅，但這會起作用。

來源

2015-05-14 22:30:01 maioman

如何設置元素高度但保持響應？

回答

相關問題