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

我大致有以下布局：

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

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

我怎样才能用粘粘的页脚实现良好的调整大小，而不会像现在这样乱七八糟

---

另外，对Vimal的答案进行了一些调整，以完全满足我的问题-

除了处理调整大小位之外，大多数您想要的内容都可以使用普通的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>

jQuery

• 使用“调整大小”事件检测窗口大小的更改
• 了解窗户的高度
• 从中减去

  页脚的高度

• 减去行高（调整最后一行中的文字）
• 将其指定为

  内容的新高度
  
  $(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');
    });
  });
  
  

---

编辑：忘记添加

  <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>

.content-inner-div { height: 60%; overflow: auto; }
.footer-inner-div { position: fixed; bottom: 0; left: 0; background-color: #F00; width: 100%;}

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