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确实有大内容时，模式弹出不会扩展到屏幕的底部。所以我得到的一个问题是 - 当我调整内容时，div不会超出它的最大尺寸。

如果没有我现在的混乱，如何使用粘性页脚实现漂亮的调整？

P.S。调整了一点Vimal的答案，完全符合我的问题 - http://jsfiddle.net/7XBrb/2/

Answer 1

您想要的大部分内容都可以使用普通的＆＃39;除了处理resize位之外的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的初始高度和overflow属性，以便在需要时显示滚动条

.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

在弹出窗口上增加div大小，使用粘性页脚调整大小

1 个答案: