javascript - 使用粘性页脚在弹出窗口调整大小时增加 div 大小

Question

我的布局大致如下:

<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 及其内容的大小增加并占据弹出窗口中的所有可用空间。 Content-div 可能包含不适合弹出窗口的非常大的内容 - 因此我可能需要在 content-div 中垂直滚动。

我在 SO 上看到过几个类似的问题(即 jQuery, change div height to automatically fill out remainder of screen if content isn't already larger 和 set 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/

Answer 1

您想要的大部分内容都可以使用普通 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