0

解決策が見当たらない場合があります。これが私の問題です：

3つのセクション（ヘッダー、セクション、フッター）のあるページがあります。フッターは常に下部にフラッシュする必要があります。また、セクション部分はヘッダーとフッターの間のすべての利用可能な場所に配置する必要がありますが、ページによって異なる最小の高さを持っている必要があります（CSSで手動で設定します）。

最小の高さに達すると、ページ全体のスクロールが利用可能になります。

これは、ヘッダー、セクション、フッターをすべての利用可能な場所に設定するために使用しているコードのサンプルです。

CSS

body {
    margin: 0
}
header, section, footer {
    left:0;
    right:0;
    overflow: hidden;
    position: absolute;
}
header {
    height: 70px;
    top: 0;
    background-color: green;
}
section {
    top: 70px;
    bottom: 195px;
    background-color: gray;
    min-height:300px;
}
article {
    overflow: hidden;
    background-color:lightyellow;
}
.news {
    position: absolute;
    bottom: -30px;
    width: 100%;
    background-color: lime;
}
footer {
    height: 195px;
    bottom: 0;
    background-color: pink;
}

HTML

<header>
    <div class="container">
        <h2>My header</h2>
    </div>
</header> 
<section>
    <article>
        <div class="news">
            <div class="row-fluid">
                <a href="#">UP</a>
            </div>
            <div class="row-fluid">
                <div class="container">
                    <div class="span6">News 1</div>
                    <div class="span6">News 2</div>
                </div>
            </div>
        </div>
    </article>
</section> 
<footer>
    <div class="container">
    My footer
</div>
</footer>​

例としてjsfiddleが利用可能です：http：//jsfiddle.net/Nk6uY/

編集

セクションに最小の高さを追加して、到達するとウィンドウにスクロールバーが表示されるようにするにはどうすればよいですか？

編集2

問題に関する情報をさらに追加します。まず、セクションタグ内のほとんどのコンテンツは絶対に設定されます。やや非表示にして、アクション（主にjavascript）に表示されます。そのため、セクションごとに、誰かがリンクをクリックした場合にすべてのコンテンツを表示するために必要な最小の高さを知っています。

私の例では、divニュースは非表示になっており、クリックすると少なくとも360pxが表示される必要があります。しかし、私のウィンドウがこれよりも小さい場合、ウィンドウにスクロールがなく、すべてのコンテンツがフッターで覆われています。

4

1 に答える 1

0

これはjavascriptを介してのみ実現できます。ヘッダー、セクション、フッターのIDを指定してから、次のようなものを使用する必要があります。

function ResizeBody() {
    var header = document.getElementById("Header");
    var section = document.getElementById("Section");
    var footer = document.getElementById("Footer");

    var height = GetBodyHeight() - header.offsetHeight - footer.offsetHeight - anyPaddingToTopOrBottomOfThreeMainSections;
    if (height > 0) {
         body.style.height = height + "px";
    }
}

function GetBodyHeight() {
    if (window.innerHeight > 0) {
        return window.innerHeight;
    }
    else {
        return document.documentElement.clientHeight;
    }
}

window.onresize = function () {
    ResizeBody();
};


$(document).ready(function () {
    ResizeBody();
});

アップデート

申し訳ありませんが、私は質問を間違って読んだと思います-セクションを画面サイズに拡大しますか、それともコンテンツが多すぎる場合は手動で設定しますか？スクロールバーがありますか？

この場合、セクションの高さ（最小の高さではなく）を設定し、overflow：hiddenの代わりにoverflow：scrollを使用する必要があります。

于 2012-12-12T09:21:10.570 に答える