---
# System prepended metadata

title: 設定同高度
tags: [jQuery]

---

---
tags: jQuery
---
###### tags: `jQuery`
# 設定同高度
依HTML內容高度設定，用CSS height改變高度可以

### JS 程式碼
```python=1
var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);
```

<iframe height="265" style="width: 100%;" scrolling="no" title="height" src="https://codepen.io/juest/embed/yLaWdaY?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/juest/pen/yLaWdaY'>height</a> by gt.juest
  (<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

##
用CSS padding增加內容間距不會改變高度

<iframe height="265" style="width: 100%;" scrolling="no" title="height-2" src="https://codepen.io/juest/embed/wvzbLdL?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/juest/pen/wvzbLdL'>height-2</a> by gt.juest
  (<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>