0

サイトに高さのあるヘッダーと、ページ下部に固定されたフッターが必要です。コンテンツブロックの高さに問題があります。

コンテンツテキストが少ない場合はコンテンツをウィンドウの高さ全体に拡大し、ウィンドウの高さよりも大きい場合はコンテンツの全高に拡大したいと思います。

コンテンツブロックを「height：100％」に設定すると、画面から消えます（ヘッダーブロックの高さは無視されます）。

ヘッダーの高さを考慮して、ウィンドウ全体の高さまで伸ばすにはどうすればよいですか？

基本的な例（現在の状況）：

http://cssdesk.com/Tcs98

ありがとう。

4

1 に答える 1

2

あなたが抱えている問題は、CSSには、この要素の高さがXである場合、この要素の高さがYであると言う方法がないことです。（まだです）

スクリプトを使用してウィンドウの高さを取得し、それをコンテンツの高さと比較する必要があります。

これにはjQueryを使用します。これは、単純であり、多くのブラウザーで機能するためにブラウザー固有のチェックを大量に行わないためです。

$(function(){
    if($('.content').height() < $(window).height() - 225){
        $('.content').css('height',($(window).height() - 225) + 'px');
    }
});

これにより、DOM対応のコンテンツの高さが取得され、ウィンドウの高さからヘッダーとフッターの高さを差し引いたものと比較されます。

ウィンドウの高さからヘッダーとフッター（実質的にはコンテンツ領域）を差し引いた値よりも小さい場合は、高さをその値に設定します。

次に、現在のCSSを変更し、コンテンツの高さを100％削除し、下部に25pxのパディングを追加して、フッター用のスペースを確保する必要があります。

大きなコンテンツの例を次に示します。小さなコンテンツの例を次に示します

もちろん、これは単純な例であり、ウィンドウのサイズ変更は処理しません。

編集：それについて考えて一日を過ごした後、私はそれを完全に応答させることはそれほど難しくないだろうと気づきました。

var initialHeight, contentHeight;

$(function(){    
    initialHeight = $('.content').height();
    contentHeight = $(window).height() - 225;

    if(initialHeight < contentHeight ){
        $('.content').css('height',contentHeight + 'px');
    }

    $(window).resize(function(){
        contentHeight = $(window).height() - 225;
        if(initialHeight < contentHeight){
            $('.content').css('height',contentHeight + 'px');    
        }else{
            $('.content').css('height',initialHeight + 'px');
        }
    });
});

上記のコードを使用すると、ウィンドウとコンテンツの高さは重要ではありません。常に「コンテンツ」領域に合わせてサイズが変更されます。

「コンテンツ」領域は、フッターとヘッダーによって占有されていない「ウィンドウ」の量として定義します。次に、ウィンドウが最初に読み込まれるときにコンテンツ要素の高さを取得します。コンテンツ領域がコンテンツ要素よりも大きくなる場合は、コンテンツ領域に一致する新しい高さを設定します。それが小さくなる場合は、最初の高さと同じ高さに設定します。

これがフィドルです

于 2013-02-19T16:55:34.020 に答える