我大致有以下布局:

<div class="outer-div">
    <div class="content-inner-div">
    </div>
    <div class="footer-inner-div">
    </div>
</div>

外部 div 包含两个 div - content-inner-div 是所有内容所在的位置,footer-inner-div 带有几个按钮。
然后我在 jQuery 弹出窗口中显示此结构,如下所示:
var template =
    '<div class="outer-div">'
        + '<div class="main-inner-div">'
            + '</div>'
                + '<div class="footer-inner-div">'
                    + '</div'
                        + '</div'
                            + '</div';

this.popup = $(template);

var formulaDialog = $(this.popup).dialog({
    modal: true,
    autoOpen: false,
    resizable: true,
    width: '300',
    minHeight: '100',
    closeText: '',
});

$(formulaDialog).dialog('open');

现在我想要的是当我调整弹出窗口的大小时 - footer-div 粘在弹出窗口的底部,而 content-div 及其内容的大小会增加并占据弹出窗口中的所有可用空间。内容 div 可能有非常大的内容,不适合弹出窗口 - 所以我可能需要在内容 div 中垂直滚动。

我在 SO 上看到了几个类似的问题(即 jQuery, change div height to automatically fill out remainder of screen if content isn't already largerset div height using jquery (stretch div height) ),但因为我没有 JS、JQuery 或 CSS 方面的经验,而且总的来说,我很难将这些答案推断为我的情况。

此时我将 maxHeight 设置为 content-div 为窗口高度的 60%
$(window).height() * 0.6

这样当 content-div 确实有大量内容模式弹出时,不会延伸到屏幕底部。所以我遇到的一个问题是 - 当我调整这个 content-div 的大小时,它不会超过它的最大大小。

如何使用粘性页脚实现良好的大小调整,而不会像现在这样困惑?

附言稍微调整了 Vimal 的回答以准确满足我的问题 - http://jsfiddle.net/7XBrb/2/

最佳答案

除了处理调整大小位之外,您想要的大部分内容都可以使用普通的 ol' CSS 来完成(实际上它确实处理了这个问题,只是不够好使用它)。

带有一些垃圾内容的 HTML

  <div class="outer-div">
    <div class="content-inner-div">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus libero eu diam aliquet lobortis. Nunc ac turpis ac enim vehicula feugiat non ac nisi. Suspendisse potenti. Mauris porta suscipit tellus, nec dapibus dui gravida eget. Vivamus interdum molestie dolor sit amet pharetra. Duis auctor facilisis scelerisque. Curabitur eget lacus augue, eget porttitor erat. Sed ornare augue vel elit pellentesque ut laoreet mauris tempus. Nullam accumsan, est sit amet sodales scelerisque, tortor ante fermentum leo, id aliquam metus purus tristique erat.

       Duis at arcu ac mauris auctor mollis placerat ac risus. Nunc porttitor bibendum tempus. Cras eget justo at dui sagittis lobortis. Aenean quam purus, dapibus a blandit at, elementum ut quam. Pellentesque pretium, metus tempus laoreet hendrerit, nunc neque pellentesque nisl, vitae aliquam felis libero sit amet erat. Proin ultrices sodales enim, in fermentum neque sagittis eu. Quisque scelerisque tincidunt iaculis. Donec bibendum ipsum quis nunc pretium sit amet adipiscing purus lobortis. Vestibulum id tortor et neque lobortis pellentesque sit amet eu velit. Sed interdum interdum nisl. Nulla hendrerit placerat suscipit. Mauris congue turpis sed nibh tristique semper. Nunc in sem vel nibh fermentum hendrerit. Pellentesque vel sapien diam. Sed ultricies tincidunt arcu, nec porttitor metus dapibus at.
   </div>
   <div class="footer-inner-div">
     <p>blah</p>
   </div>

CSS。设置内容 div 的初始高度和溢出属性,以便滚动条在需要时显示
.content-inner-div { height: 60%; overflow: auto; }
.footer-inner-div { position: fixed; bottom: 0; left: 0; background-color: #F00; width: 100%;}

jQuery
  • 使用 resize 事件检测窗口大小的变化
  • 获取窗口的高度
  • 从中减去 footer div 的高度
  • 减去行高(调整最后一行的文本)
  • 将其指定为 content div 的新高度。
    $(function () {
      $(window).on('resize', function () {
        $('.content-inner-div').css('height', ($(this).height() - $('.footer-inner-div').outerHeight() - parseInt($('.content-inner-div').css('line-height'), 10)) + 'px');
      });
    });
    


  • 编辑:忘记添加 Fiddle

    10-06 09:11
    查看更多