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 ，然后将一个类添加到您的模式中。在下面的示例中，我选择< strong>“ 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-scrollbar，您只需要x-scroll就可以了：）

根据内容划分高度

3 个答案: