Div 高度根据内容

Question

我正在开发具有固定页眉和页脚的模式。

这里是 Jsfiddle 例子

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

例如 this example 内容较少，没有滚动条，但 space 是空的。如果没有滚动，我需要获取内容的高度。

如有任何帮助或建议，我们将不胜感激

提前致谢。

Answer 1

看起来模态高度受此内联样式控制：

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

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

看起来还有一个 y-scrollbar，你只需 x-scroll 就可以到达那里:)

Answer 2

而不是使用height: 300px;

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

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

Answer 3

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

首先删除内联样式 style="width:600px;height:300px as it is conflicting with this solution, then add a class to your modal. For the example below I chose "myModal"，作为旁注，使用 overflow: auto，以避免在内容不足的情况下出现滚动条。此解决方案还处理 fancybox 附带的默认样式。

例子

$(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>

Div 高度根据内容

Div height according to content

css

height

fancybox

fancybox-2