スティッキーフッタのレイアウトに問題がある

私は、スティッキーフッタとページの幅に行くヘッダーでサイトレイアウトを作ろうとしています。コンテンツのdivは960ピクセル幅で、高さはヘッダーの下部からフッターの上部に移動する必要があります。常に少なくともこの高さにする必要があります。私が今直面している問題は、内容divの内容をコンテンツの高さにするか、ページが終わるところの下にあるwrap divを超えて展開することができるということです。スティッキーフッタのレイアウトに問題がある

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <style> 
html{ 
height: 100%; 
min-height: 100%; 
} 

body{ 
min-height: 100%; 
width: 100%; 
height:100%; 
} 

#wrap{ 
height:auto; 
height:100%; 
min-height:100%; 
position:relative; 
margin:auto; 
} 

#header{ 
background: blue; 
height: 152px; 
} 

#content{ 
background: #555; 
min-height: 100%; 
margin: 0 auto; 
width: 960px; 

} 

#footer{ 
margin-bottom: 41px; 
height: 59px; 
background: red; 
position:absolute; 
width:100%; 
bottom:0; 
} 
</style> 

</head> 
<body> 
    <div id ='wrap'> 
     <div id='header'> 
     </div> 
     <div id='content'> 
     </div> 
     <div id='footer'> 
     </div> 
    </div> 
</body>

出典

2011-08-07 Mike

私はあなたが何を意味するか取得しないの上部に固執するだろうあなたは絶対にフッターの位置を設定している

は、あなたはそれがより明確に説明することがありますか、それはちょうど私がそれを理解することはありません。 – Zhianc

これは、上記のコードの外観です。 [link]（http://img21.imageshack.us/img21/8005/layout1qo.png）これは次のようになります。 [link]（http：// img15.imageshack.us/img15/6369/layout2sp.png） – Mike

あなたは#wrap下のすべてのあなたの要素のposition:relativeを使用する必要がありますので、彼らは相対的に下に置き、100％に高さを設定することは有用ではないだろう。それはページ

出典

2011-08-07 07:59:17

フッターは絶対に設定されています。いずれにせよ、これは私のコンテンツdivがフッターとヘッダーの間の垂直スペースにまたがることはありません – Mike

スティッキーフッタのレイアウトに問題がある

答えて

関連する問題