CSS #containerについて

締切済

質問者：ayussy
質問日時：2013/01/11 04:05
回答数：1件

えっと、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>

</div>

<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>

<div id="sidebar">

</div>

</div>

<div id="footerbg">

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

</div>

</div>

</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%;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2013/01/11 20:04

スタイルシートに手をつける前にHTMLをきちんと学びなおしたほうが得策です。

DOCTYPEを<!DOCTYPE html>と書かれているところからHTML5を想定されているのだと思いますが、HTML5の目的は大きく二つあります。
・セマンティクウェブ
・canvasやvideo、formの拡張などインタラクティブな部分
　セマンティクウェブでは、文書構造をマークアップすることが強く求められます。これはHTML4.01の時代もそうだった
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
のですが、HTML5では、これでは抽象的過ぎて理解されなかったために、HTML5では、わざわざ新しい要素が追加されました。すなわち、header(文書のヘッダ),section(本文),footer(フッタ),nav(ナビゲーション),aside(本文と関係ないコラなど),figure(挿絵的要素),article(ヘッダー、本文、フッターを持ちうる独立した記事)。これは、HTML4.01の時代、それぞれ<div class="header"><div class="section"><div class="footer">・・・のように書くように推奨されていたものです。
　これはHTML5だと
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index3.css">
</head>
<body>
　<header>
　　<h1>header</h1>
　　<nav>
　　　<ul>
　　　　<li><a href="">めにゅー１</a></li>
　　　　<li><a href="">めにゅー２</a></li>
　　　　<li><a href="">めにゅー３</a></li>
　　　</ul>
　　</nav>
　</header>
　<section>
　　<h2>本文見出し<h2>
　　<p>記事</p>
　　<nav>
　　　<h3>目次<h3>
　　　<ul>
　　　　<li><a href="">めにゅー１</a></li>
　　　　<li><a href="">めにゅー２</a></li>
　　　　<li><a href="">めにゅー３</a></li>
　　　</ul>
　　</nav>
　</section>
　<footer>
　　<h2>文書情報</h2>
　</footer>
</body>
</html>

HTML4.01だと下記のようになります。

この様にHTMLも極めてシンプルになります。そして誰が見ても--検索エンジンのロボットが見ても、どこに何が書かれているか一目で判る。

　その上でスタイルシートでデザインして行きますが、スタイルシートもこの文書構造に従いますから、とっても簡単になります。あとから誰が見ても理解できる。

HTML4.01とスタイルシートの実例(幅は640～900pxに制限してあります。)
タブは＿に置換してあるので戻すこと
　こんなにシンプルでわかりやすくなるのですよ。(HTMLさえきちんと書けていたら)
headerbg,sidebar,main,contentsmenueなど意味不明なclass名を付けたら後で見直してもわからないし、そもそも検索エンジンが理解してくれませんよ。HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )を参考にすると良いです。そのまま<div class="section">を<section>に変えればHTML5になります。
★後は自分で工夫してみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=utf-8">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>header</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="">めにゅー１</a></li>
＿＿＿＿<li><a href="">めにゅー２</a></li>
＿＿＿＿<li><a href="">めにゅー３</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿<p>記事</p>
＿＿<div class="nav">
＿＿＿<h3>目次</h3>
＿＿＿<ul>
＿＿＿＿<li><a href="">めにゅー１</a></li>
＿＿＿＿<li><a href="">めにゅー２</a></li>
＿＿＿＿<li><a href="">めにゅー３</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>