根据内容的div高度

Question

我正在开发一个带有固定页眉和页脚的模态框。

这是Jsfiddle 示例

目前scrollable-stuff 类的高度为 80%。如果内容少且没有滚动，那么我需要降低高度并取内容的高度。

例如this example 的内容较少，没有滚动条但有一个空白区域。如果没有滚动，我需要获取内容的高度。

任何帮助或建议将不胜感激

提前感谢。

Answer 1

而不是使用height: 300px;

你可以使用max-height: 300px;

因为 max-height 告诉浏览器，如果内容小于但不大于指定高度（在您的情况下为 300px），则高度可以更小。

Answer 2

在这些情况下，我喜欢利用 flexbox 列方向。这里的想法是为页脚和页眉设置固定高度，然后使用 flex-basis: 100% 和 flex-grow: 1 让内容占据其余部分。

首先删除内联样式 style="width:600px;height:300px 因为它与此解决方案冲突，然后向您的模态添加一个类。对于下面的示例，我选择了 “myModal”，并作为旁注，使用 overflow: auto，以避免在没有足够内容的情况下滚动条。此解决方案还处理附带的默认样式花式盒子。

示例

$(document).ready(function() {

   $("#ModalPopup").fancybox({}).trigger('click');

});

.title-div {
  min-height: 32px;
}

.scrollable-stuff {
  overflow-y: auto;
  flex-grow: 1;
  flex-basis: 100%;
}

.button-div {
  min-height: 32px;
}

.myModal {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<div id="ModalPopup" class="myModal">

  <div class="title-div">Title</div>

  <div class="scrollable-stuff">

    <h1>For Your Information</h1>
   
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
  </div>

  <div class="button-div">
    <button type="button" class="btn-primary">Click</button>
  </div>
</div>

Answer 3

看起来模态高度是由这种内联样式控制的：

<div id="ModalPopup" style="width:600px;height:300px;">

这个固定的高度是导致您的模态高度缺乏响应能力的原因。要解决此问题，请去掉height:300px;，尽管您可能还需要找出它的设置位置并在那里进行更改。类似的解决方案也适用于固定宽度。

它看起来也有一个 y 滚动条，你只需要 x 滚动就可以到达那里:)