如何在模式中设置 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

要在 firstchild-body2 中应用正确的滚动，您需要将其高度设置为自动。您还需要设置 col-7 的最大高度。

使用 JS，您可以在 firstchild-body2 元素上设置最大高度值，以便它可以自动应用滚动条。

别忘了在 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>

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

How to set the height of a div inside a modal in order to make it scroll?

javascript

jquery

bootstrap-modal