footerを常に最下部にするとfooterがコンテンツに重なってしまう

以下のhtmlでは「<P>コンテンツここが重なる</P>」がfooterに重なって表示されません。

やりたいことは、
コンテンツが少なく画面がスクロールしない場合は画面の一番下にfooterを配置
コンテンツが多く画面がスクロールする場合はスクロール終端（コンテンツの次）にfooterを配置する
です。

色々と調べてはおりますが、実現できておりません。
ご教示、お願い致します。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    <!-- HTML内埋め込み -->
    <style type="text/css">
      <!--
html,  body 
{ 
	margin: 0;
	width: 100%; 
	height: 100%; 
}
.container 
{ 
	position: relative; 
	width: 100%; 
	height: auto !important; 
	height: 100%; 
	min-height: 100%; 
}
header 
{ 
	width: 100%; 
	height: 60px; 
	background-color: #666; 
	position: fixed; 
}
main 
{ 
	padding-top: 60px; 
	height: auto; 
	background-color: #fff000; 
}
footer 
{ 
	width: 100%; 
	height: 60px; 
	background-color: #999; 
	position: absolute; bottom: 0; 
}  
-->
</style>
  </head>
  <body>    
	<div class="container">
	  <header>ヘッダー</header>
	  <main>
	  <P>コンテンツ</P>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <P>コンテンツここが重なる</P>
	  </main>
	  <footer>フッター</footer>
	</div>  
</body>
</html>

行動規範の内容に同意します

回答1件

自己解決

mainに「padding-bottom: 60px; 」を追加する事で解決しました。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
  <head>
    <!-- HTML内埋め込み -->
    <style type="text/css">
      <!--
html,  body 
{ 
	margin: 0;
	width: 100%; 
	height: 100%; 
}
.container 
{ 
	position: relative; 
	width: 80%; 
	height: auto !important; 
	height: 100%; 
	min-height: 100%; 
}
header 
{ 
	width: 70%; 
	height: 60px; 
	background-color: #666; 
	position: fixed; 
}
main 
{ 
	padding-top: 60px; 
	padding-bottom: 60px; 
	height: auto; 
	background-color: #fff000; 
}
footer 
{ 
	width: 50%; 
	height: 60px; 
	background-color: #999; 
	position: absolute; bottom: 0; 
}  
-->
</style>
  </head>
  <body>    
	<div class="container">
	  <header>ヘッダー</header>
	  <main>
	  <P>コンテンツ</P>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	  <P>コンテンツここが重なる</P>
	  </main>
	  <footer>フッター</footer>
	</div>  
</body>
</html>

投稿2016/08/18 13:56

sunchan1107

総合スコア55