如何在模式中设置div的高度以使其滚动？

Question

我有一个结构如下的模态：

  <div class="modal fade" id="editSaga" tabindex="-1" role="dialog">
<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">
                </div>
                <div class="firstchild-body1">
                    // some content
                </div>
                <div class="firstchild-body2">
                    // some other content
                </div>
            </div>
            <div class="col-5">
            </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()。但是这个解决方案也根本不起作用。任何帮助都将不胜感激。

Answer 1

我在这里为您制作了一个有效的代码示例：https://codepen.io/solutionsswift/pen/GRvxLOd

要在第一个子体2中应用正确的滚动，需要将其高度设置为auto。此外，您还需要设置col-7的最大高度。

使用JS，您可以在第一个can body2元素上设置max-height值，这样它就可以自动应用滚动条了。

不要忘记在body2上设置overflow: auto！

​

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>

​