4

私は長い間自分で試してみましたが、これまでに読んだりグーグルで調べたりしたすべての投稿は役に立ちませんでした。

ヘッダー、フッター、およびコンテンツで構成されるレイアウトがあります。このレイアウトは、ページ全体に高さを広げています (これを理解するのに時間がかかりました)。ここまでは順調ですね。content-divしかし今は、フッターの先頭まで、可能な限り下に伸ばしたいと思っています。私が何をしてもうまくいかず、テキストの長さを維持するか、ウィンドウ全体のサイズになり、フッターを非表示にしてスクロールバーを生成します。私はそれを作る解決策について読みましたposition:absoluteが、私はそれを望んでいません。

例を次に示します: http://jsfiddle.net/N9Gjf/1/

あなたは本当に私を助けてくれるでしょう！

CSSは次のとおりです。

html, body {
    height:100%;
    text-align:center;
}

#wrapper {
    min-height:100%;
    height:100%
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
}   

#footer {
    background-color: silver;
    height:1.5em;
    width:800px;
    margin: -1.5em auto;
}

#header {
    background-color: orange;
    height:100px;
}

#content {
    background-color: limegreen;
}

* {
    margin:0;
    padding:0;
}

そして、ここにhtmlがあります：

<div id="wrapper">

    <div id="header">
        <p>Header</p>
    </div>
    <div id="content">
    INHALT  
    </div>

</div>

<div id="footer">
    <p>Footer</p>
</div>
4

4 に答える 4

5

http://jsfiddle.net/calder12/CprV7/

ラッパーの高さの後にセミコロンがありませんでした。コンテンツの高さと最小高さも 100% に設定します。

#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}

#content {
background-color: limegreen;
height:100%;
min-height:100%;
}
于 2012-10-22T11:26:02.277 に答える
2

相対絶対配置が最良の解決策だと思います (高さの合計を 100% にする方法を見つけることができないことは認めます)。これがあなたがする必要があることです：

デモ #1

  1. ラッパーの位置を相対的にする
  2. すべての div をラッパー内に配置する
  3. 絶対配置を使用して、コンテンツとフッターの位置とサイズを設定します。次のいずれかを使用します。
    1. heightdivを指定しないでください。指定topしてbottom
    2. topいずれかを指定するかbottom、両方を指定しないでください。特定height

別の方法は、負のマージンを使用することです。これは頭​​の体操かもしれませんが、アイデアを理解すると、ポジショニングよりもはるかに簡単になります。これがあなたがする必要があることです：

デモ #2

  1. ヘッダーとフッターに高さを割り当てる
  2. コンテンツに 100% の高さを割り当てる
  3. コンテンツに負のマージンを使用して、(i) コンテンツがヘッダーの上に表示されるようにします (ii) フッターが表示されるようにします
  4. z-index ポジショニングを使用して、ヘッダーをコンテンツの「前」に配置します
  5. パディング div を使用して、コンテンツ div 内のものをヘッダーの下にプッシュします
于 2012-10-22T11:45:14.787 に答える
0 
#wrapper {
    min-height:100%;
    height:100%; /*missed the semicolon here*/
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue; position:relative
}

動作するようになりましたDEMO

于 2012-10-22T11:27:32.587 に答える
0

ラッパーにエラーがあります:

#wrapper {
    min-height:100%;
    height:100%;
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
}

;の最後にa を付けるのを忘れましたheight:100%。

試してみると、うまくいくことがわかります

于 2012-10-22T11:28:43.680 に答える