CSS #containerについて
えっと、CSSについての質問です。
最近勉強をはじめたのですが、
#container を下まで伸ばすのに
height: 100%;
min-width: 100%;
をいれても下まで伸びない現象がおきています。
最初は伸びていたのですが、
ヘッダーとフッターを横に１００％にしてから
様子がおかしくなりました。
減ったーフッターは横に全部伸ばしたくて、
コンテイナーは横は余白つけて下にのばしたいのです＞＜
どなたか原因がわかる方、対処法わかる方
いましたらお願いします＞＜
------------------------------HTML---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index3.css">
</head>
<body>
<div id="container">
<div id="headerbg">
<div id="header">
<h1>header</h1>
</div><!-- header -->
</div><!-- headerbg -->
<div id="menu">
<ul>
<li><a href="">めにゅー１</a></li>
<li><a href="">めにゅー２</a></li>
<li><a href="">めにゅー３</a></li>
<li><a href="">めにゅー４</a></li>
<li><a href="">めにゅー５</a></li>
<li><a href="">めにゅー６</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
</div><!-- contens -->
<div id="sidebar">
</div><!-- sidebar -->
</div><!-- main -->
<div id="footerbg">
<div id="footer">Footer</div><!-- footer -->
</div><!-- footerbg -->
</div><!-- container -->
</body>
</html>
-------------------------CSS---
html {
background-image: url('hana3.jpg');
background-attachment: fixed;
}
body {
font-family: Verdana, Arial;
font-size: 20px;
margin: 0px;
padding: 0px;
}
html,body,#main,#container{
height:100%;
}
#container {
height: 100%;
min-width: 100%;
background-color: rgba(255,100,0,0.5);
}
#headerbg{
width: 100%;
min-width: 100%;
background-color: rgba(255,100,0,0.5);
}
#header {
padding: 40px;
width: 100%;
}
#menu {
}
#menu>ul>li {
float: left;
}
#main {
overflow: hidden;
}
#sidebar {
}
#footerbg{
background-color: rgba(255,100,0,0.5);
width: 100%;
min-width: 100%;
}
#footer {
padding: 50px;
width: 100%;
}
