0

まず、私が持っているレイアウトの実際の例を確認してください：http: //jsfiddle.net/EPC8c/2/

私がやろうとしているのは、これにトップマージンを追加することです。私はこれのほとんどを100％の高さに構築しているので、これを試すと少し奇妙になります：http: //jsfiddle.net/EPC8c/1/（固定リンク）

流動的なレイアウトでは、フッターがページの0または100％を超えて押し下げられたままになります。これはおそらく意図したとおりに機能していますが、これを引き起こさないための解決策を見つけようとしています。

これに関するどんな助けも素晴らしいでしょう。

HTML

<div id="container">

    <header></header>

    <div id="content"></div>

    <footer></footer>

</div>

CSS

html, body {
    background: #ff3333;
    margin:0;
    padding:0;
    height:100%;
}

#container {
    position:relative;
    background: #FFF;
    margin: 0 auto;
    width: 200px;
    min-height:100%;
}
header {
    height: 60px;
    background: #888;
}
#content {
    background: #FFF;
    min-height: 200px;
    padding-bottom: 60px; /*FOOTER HEIGHT*/
}

footer {
    position:absolute;
    bottom: 0;
    width: 200px;
    height: 60px;
    background: blue;
}
4

2 に答える 2

1

この質問のおかげで、これが解決策です: CSS 100% height with padding/margin

JSFiddle:
http://jsfiddle.net/EPC8c/5/

HTML:

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="content">

        </div>
        <footer></footer>
    </div>
</div>

CSS:

#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
于 2012-10-10T23:03:07.703 に答える
0

確かにこれは最善の解決策ではなく、パーセンテージマージンに依存していますが、1つのルートは、すべてを絶対位置のdivでラップし、上部のパディングのパーセンテージと下部のパディングのパーセンテージを負（等しい）にすることです。このような：

http://jsfiddle.net/EPC8c/3/

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="content">

        </div>
        <footer></footer>
    </div>
</div>

CSS：

#wrapper {
position: absolute;
width: 100%;
height: 90%;    
padding-top: 10%;
padding-bottom: -10%;
}
于 2012-10-10T22:57:29.483 に答える