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%;
}
補足
もうしわけないです要素１間違ってました。 具体的には ・意図したいレイアウト（HTML記述順） 右メイン(可変長)、左メニュ、ヘッダ、フッタ、問題 ・html構成 <body> <div id="ベース">・・・絶対指定 <div id="コンテナ"> <div id="右メイン"> </div> </div> <div id="左メニュ">・・・絶対指定 </div> <div id="ヘッダ">・・・絶対指定 </div> <div id="フッタ"> </div> </div> <div id="問題"> </div> </body> ・CSS ベース {position: absolute;left: 2%; right: 2%; min-width: 650px; } コンテナ {margin-right: 5px; padding-top: 120px;} (ベース右に5pxの画像、ヘッダ部分のスペース120px) メイン{padding-left: 11em;} (メニュ部分のスペース) メニュ{position: absolute; top: 120px; left: 0; width: 10em;} ヘッダ{position: absolute; top: 0; left: 0; width: 100%;} (ベースに対しての100%(ヘッダの中では他要素は絶対指定でレイアウトしている)) フッタ{} (特に指定なし) id=問題はサーバが後から記述する為変更できません。 後からの要素をベースの下部に流し込んでいくにはどうすれば・・・。 一番あってほしい解決方法は絶対指定要素を普通の要素としてなのですが・・・ 何か良い案はないでしょうか？