想做一个高度可以自适应内容的模态框。
内容越长,模态框越长,宽度是固定的。
在内容较短的时候模态框垂直居中,当内容很长的时候模态框最大高度浏览器窗口高度。内容部分可以上下滚动。
1 <div id="MyModal" class="modal fade container in" tabindex="-1" style="display: block; padding-left: 17px;"> 2 3 <div class="MyModal-body modal-content"> 4 <div style="text-align:right;"> 5 <a data-dismiss="modal" aria-hidden="true" style="font-size:16px; margin-right:15px; color:grey">×</a> 6 </div> 7 <div style=" 8 9 overflow-y: auto; 10 "> 11 <table class="table table-bordered"> 12 <thead> 13 <tr> 14 <th>Name</th> 15 </tr> 16 </thead> 17 <tbody> 18 <tr> 19 20 <td > 21 Td1 22 </td> 23 </tr> 24 25 .... 26 <tr> 27 28 <td > 29 t'dn 30 </td> 31 </tr> 32 </tr> 33 </tbody> 34 </table> 35 </div> 36 37 <div class="text-center"> 38 <a class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</a> 39 40 </div> 41 </div> 42 </div>
.MyModal-body { background: #fff; position: relative; top: 50%; transform: translateY(-50%); max-height: 100%; padding: 0 16px; }
在内容(就是table的行数)较短的时候页面,模态框正常,内容长的时候,模态框的本身高度是窗口的100%,但是内部的元素比模态框本身要搞,如果直接在模态框上使用overflow会让整个模态框上下滚动
我想只让table的tbody上下滚动
当然所有的效果都可以使JS来计算完成, 但是我比较想用CSS做,请问各位大神有没有什么比较好的解决方法