0

解像度に問題がないように、背景画像にバックストレッチを使用しています。画像はテクスチャです（コンテンツセクションの背景色となる白い領域があったことがあります。ここでは、このような問題はありませんでしたが、他の問題はありませんでした）。これで、中央のコンテンツセクション（ヘッダー、フッターを含む）の背景が白になります。

問題

コンテンツが十分に高くない場合は、下部にテクスチャが表示されますが、白である必要があります。ページ下部のスクリーンショットは次のとおりです。

ここに画像の説明を入力してください

白い部分は垂直に伸ばす必要があります。したがって、コンテンツセクションの高さを（ウィンドウの高さに応じて）増やす必要があるか、スティッキーフッターソリューションが必要です。私はいくつかのことを試しましたが、どれもうまくいきませんでした（たとえば、コンテンツがない場合でもDIVブロックをページの下部まで拡張する方法のヒントまたはRyan Faitのスティッキーフッターソリューション）。

これは私のページの簡略版です。これがjQuery部分のないJSFiddleです。

HTML

<div id="header">
    <p>Introduction</p>
</div>
<div id="main-wrap">
    <div id="column1">
        <p>Menu</p>
    </div>
    <div id="column2">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="clearer"></div>
</div>
<div id="footer">
    <p>Some Links</p>
</div>

CSS

body {
    background-color: black;
}

#header {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}


#main-wrap {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}


#column1{
    float: left;
    width: 60px;
}


#column2{
    float: left;
    padding-left: 20px;
    width: 300px;
}

#footer {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}

.clearer{
    float: none;
    clear: both;
}

私が想像できる唯一のことは、Javascriptを使用して、ページの下部にあるスペーサーdivを計算することです...このソリューションは、すべての主要なブラウザー（IE7-IE9、FF、Chrome、Opera、Safari）で機能するはずです。

現在のJS-ソリューション

<script language="javascript" type="text/javascript">
    <!--
    $(document).ready(function(){
        $.backstretch("img/background.jpg");

        var headerheight = $('#header').height();
        var column1height = $('#column1').height();
        var column2height = $('#column2').height();
        var columnheight = Math.max(column1height, column2height);
        var footerheight = $('#footer').height();
        var contentheight = headerheight + columnheight + footerheight;
        var innerheight = $(window).height();
        // calculate height of content to fill out full height of window
        var height = innerheight - headerheight - footerheight;
        // only if the the content has not enough height
        if (contentheight < innerheight) {
            $('#main-wrap').css('min-height', Math.max(height, columnheight));
        }
    });
    -->
</script>

CSSソリューションの方がいいのですが、解決策が見つかりませんでした。

4

1 に答える 1

1

min-heightletをjQueryで計算させることができます。

$(function() {
  $("the_content").css("min-height", Math.max(window.innerHeight, parseInt($("the_content").css("height"))));
})

もちろん、window.innerHeightを正当化することもできます。たとえば、コンテナにパディング（幅に追加される）がある場合などです。

于 2012-10-23T16:38:43.360 に答える