4

私はおおよそ次のレイアウトを持っています：

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

外側の div には 2 つの 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');

今私が欲しいのは、ポップアップ ウィンドウのサイズを変更するときです。フッター div はポップアップの下部に固定され、コンテンツ div とそのコンテンツはサイズが大きくなり、ポップアップで使用可能なすべてのスペースを占有します。content-div には、ポップアップに収まらない非常に大きなコンテンツが含まれている可能性があるため、content-div で垂直スクロールが必要になる場合があります。

私はSOでいくつかの同様の質問を見てきました（つまり、jQuery、divの高さを変更して、コンテンツがまだ大きくない場合は画面の残りの部分を自動的に埋め、 jqueryを使用してdivの高さを設定します（ストレッチdivの高さ））が、JSの経験がないため、 JQueryまたはCSSであり、一般的に、これらの回答を自分の状況に推定するのに苦労しています。

この時点で、ウィンドウの高さの 60% に maxHeight を content-div に設定します。

$(window).height() * 0.6

content-div に大きなコンテンツ モーダル ポップアップがある場合、画面の下部まで拡張されないようにします。だから私が得る問題 - この content-div のサイズを変更しても、最大サイズを超えて大きくならないということです。

現在の混乱なしに、スティッキーフッターで適切なサイズ変更を実現するにはどうすればよいですか?

PS私の質問に正確に応えるためにVimalの答えを少し微調整しました - http://jsfiddle.net/7XBrb/2/

4

1 に答える 1

3

あなたが望むことのほとんどは、サイズ変更ビットを処理することを除いて、普通の 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

  • ウィンドウのサイズの変更を検出するには、サイズ変更イベントを使用します。
  • ウィンドウの高さを取得する
  • 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');
  });
});

編集：フィドルを追加するのを忘れました

于 2013-04-03T11:41:40.993 に答える