0

HTMLページの下部にフッターを配置しようとしています。私のコンテンツは単純ですが標準的ではないため、オンラインで適切なチュートリアルを見つけることができませんでした（私は推測します）。

私は次のhtmlコードを持っています（単なるテストページであり、本物ではありません）：

<html>

<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<div id = "container">


<div id = "header">
This is the header
</div>

<div id = "body">


<div class="IRL">
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div>
</div>



<div id = "footer">
Testing footer
</div>

</div>
</div>
</html>

「style.css」の関連コンテンツは次のとおりです。

html,

body    {
margin: 0;
padding: 0;
height: 100%;
}


#container  {
min-height:100%;
position:relative;
}

#container {
height:100%;
}

#body {
padding:10px;
padding-bottom:50px;   /* Height of the footer */
}

#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;   /* Height of the footer */ //This is from a tutorial
}

.IRL {

position: absolute; top:50px; left:10px;
}


.IRL li{

margin:0px 150px 0px 0px;
list-style-type:none;

}



.box    {
margin-top: 10px;
padding: 5px 5px 5px 5px;
border: 2px solid #000000;
width:100px;
height: 100px;
color:#000000;
}

問題は、フッターが一番下にある場合でも（少しいじくり回した後）、フッターがボックスを切り抜けることです。基本的に、ボックスの後にギャップを作成する方法を知っている人はいますか？私はパディングボトムがそれをすることになっていたと思っていましたか？

はっきりしているといいのですが

よろしくお願いします。乾杯。

4

2 に答える 2

0

アイテムを含む要素の高さを超えるにを追加してみてmargin-topください。#footer.box

于 2012-12-23T13:46:46.250 に答える
0

すべての絶対位置を削除し、以下を追加します。

.IRL {
  margin-bottom: 50px;
}

デモ

または、さまざまな要素の絶対位置topと値を微調整します。bottom

于 2012-12-23T13:50:34.713 に答える