4

我大致有以下布局：

<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，如果内容还没有变大，则更改 div 高度以自动填充屏幕的其余部分，并使用 jquery (stretch div height) 设置 div 高度）但是因为我没有 JS 经验， JQuery 或 CSS，一般来说，我很难根据我的情况推断这些答案。

此时我将 maxHeight 设置为 content-div 为窗口高度的 60%

$(window).height() * 0.6

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

如何在没有我现在的混乱的情况下使用粘性页脚实现良好的调整大小？

PS 调整了一点 Vimal 的答案来完全满足我的问题 - http://jsfiddle.net/7XBrb/2/

4

1 回答 1

3

您想要的大部分内容都可以使用普通的 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的高度
  • 减去行高（调整最后一行的文本）

  • 将其指定为contentdiv 的新高度。

    $(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');
  });
});

编辑：忘记添加小提琴

于 2013-04-03T11:41:40.993 回答