我有一個模態結構如下：
<div class="modal fade" id="editSaga" tabindex="-1" role="dialog">
<div >
<div >
<div >
<div >
<div >
</div>
<div >
// some content
</div>
<div >
// some other content
</div>
</div>
<div >
</div>
<div>
</div>
</div>
我想讓firstchild-body2內容在其內容超出class col-7具有以下樣式的父級內容時滾動：
.col-7 {
max-height: 100%;
overflow: hidden;
}
我嘗試使用 jquery 并以這種方式獲取其高度：
$(".firstchild-body2").height(`$("#editSaga .modal-content").height()` - $(".firstchild-
header").outerHeight() - $(".firstchild-body1").outerHeight());
但我沒有作業，因為我總是包含溢位元素的高度。然后我將其更改$("#editSaga .modal-content").height()為$(".col-7").height(). 但這個解決方案也根本不起作用。任何幫助將不勝感激。
uj5u.com熱心網友回復：
我在這里為您制作了一個作業代碼示例：https : //codepen.io/solutionsswift/pen/GRvxLOd
要在 firstchild-body2 中應用正確的滾動，您需要將其高度設定為自動。您還需要為 col-7 設定最大高度。
使用 JS，您可以在 firstchild-body2 元素上設定 max-height 值，以便它可以自動應用滾動條。
不要忘記在 body2 上設定溢位：自動！
const header = document.querySelector('.firstchild-header');
const body1 = document.querySelector('.firstchild-body1');
const body2 = document.querySelector('.firstchild-body2');
const col7 = document.querySelector('.col-7');
// Set the max-height = total height of col-7 minus the height of header and
body2.style.maxHeight = col7.offsetHeight - header.offsetHeight - body1.offsetHeight 'px';.modal-body {
height: 100%;
max-height: 80px;
}
.col-7 {
overflow: hidden;
width: 100px;
height: auto;
background-color: red;
}
.firstchild-body2 {
box-sizing: border-box;
overflow-y: auto;
height: auto;
}<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body row">
<div class="col-7 firstchild">
<div class="firstchild-header">
header
</div>
<div class="firstchild-body1">
Body 1
</div>
<div class="firstchild-body2">
Body 2 sdfsdf sfsdf ssdf sf sd fsd fs fs fs fs
</div>
</div>
<div class="col-5">
</div>
<div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351799.html
標籤：javascript 查询 引导模式
上一篇：在條件中使用多個else塊