0

上部にヘッダー 100px を配置するレイアウトを設計しようとしています。フッター 80px は、常にブラウザー画面の下部と、ヘッダーとフッターの間のスクロール可能なコンテンツ領域に固定されます。コンテンツがフッターの上端に触れるまで、書き込みが終了すると、垂直スクロールバーがコンテンツ領域に表示されるはずです。

どうすればこれを達成できるか教えてもらえますか

これが私が試したことです: JsFiddle

<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>

私のCSS：

header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
    height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
    overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
4

4 に答える 4

0

編集: FIDDLE

#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}
于 2013-10-09T15:56:20.753 に答える
0

残念ながら、これには JavaScript を使用する必要があります。大きな問題ではない。ウィンドウのサイズを変更するときのハンドラーも追加しました。

var resizeTimer;
window.onload = function(){
    makeMiddleFull();
}

window.onresize = function(){
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
    var cobj = document.getElementById('content');
    cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

DOM と CSS を含む完全なコード更新については、更新されたフィドルを参照してください: http://jsfiddle.net/Qpc2s/2/

于 2013-10-09T15:56:34.270 に答える
0

何を試したか教えてください。ヘッダーもフッターも表示されず、スクロール可能な div にテキストが表示されるだけです。

わかりました、少しご案内しましょう。

あなたがすることは単純ですが、要点を理解する必要があります。

フッターを一番下にくっつける方法。

footer {
 position: absolute; // position as absolute..
 bottom: 0; // margin-bottom as 0 
 max-width: 80px; // width
 margin: 0 auto; // margin..
}

これにより、フッターが常にドキュメントの最後、つまりページの下部に留まるようになります。

ヘッダーの作り方

header {
 position: absolute;
 top: 0;
 max-width: 100px;
 margin: 0 auto;
}

スクロール可能なdivの作り方

私はこれを完全には理解していません。ですので、少しだけご案内します。

コンテンツ div にスクロールバーを作成できます。あなたはこれを求めている：

垂直スクロールバーがコンテンツ領域に来るはずです

これを使用してそれを行うことができます：

div {
 max-height: 100px;
 min-height: 100px;
}

divを要素またはクラスに、または id をあなたが持っているものに変更しようとしていると仮定します。

スクロールバーでスクロール可能な div を作成します。

まず、div が画面の高さを超えないように、max-height で div を作成します。次に、次のようなスクロールバーを使用できます。

overflow: scroll;

このプロパティを要素に追加します。このようにして、フッター、ヘッダー、およびブラウザーにあるスクロールバーではなく、それ自体のスクロールバーを持つコンテンツ ブロックが作成されます。

これをフィドルします：

http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/

申し訳ありませんが、わざわざ背景を変更しませんでしたが、ご覧のとおり、ヘッダーはそこにとどまり、フッターは最後にあり、div がスクロールします! :)

幸運を！

于 2013-10-09T15:45:54.393 に答える
0

以前に同様の質問に答えました: Div height percentage based but still scrolling

ここに 1 つのアプローチがあります。

HTML:

<header>The Header...</header>
<div id="main">
    <div id="content">
        scrollable content area
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>

CSS:

html, body {
    height: 100%;
}
body { 
    margin: 0;
}
header {
    height: 100px;
    width: 100%;
    background: #bbb;
    position: absolute;
    top: 0;
}
#main {
    background: #ccc;
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 80px;
    left: 0;
    right: 0;
    overflow-y: auto;
}
#content {
    overflow: auto;
    background: green;
}
footer {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: #aaa;
}

トリックは、ヘッダーとフッターの間の領域にまたがる絶対配置ブロック コンテナーを作成する#mainことoverflow-y: autoです。

は#contentスペースを占有し、最終的に のスクロール バーをトリガーします#main。

デモを参照してください: http://jsfiddle.net/audetwebdesign/aNRE9/

于 2013-10-09T15:54:37.313 に答える