私は完全な html/css 初心者で、初めてのサイトを作成しています。私はそれを次のようにしたい:
http://www.dorishochscheid.nl/
次のように、ナビゲーション バーとメイン コンテンツを「含む」ために div 要素を使用しました。
<div id = "container">
<nav> ... working navigation bar here ... </nav>
<section id = "content"> ... main content here ... </section>
</div>
これは私のcssです:
body {
background-image: url(images/achtergrond.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin: 0;
}
#container {
margin: 0 auto 0;
margin-bottom: 200px;
width: 800px;
height: 1000px;
background-color: #de59b2;
opacity:0.85;
/* voor slechte browsers */
filter: alpha(opacity=85);
}
#content {
float: left;
background-color: #de59b2;
margin: 15px 45px;
}
ナビゲーション バー、コンテンツ セクション、およびコンテナーはすべて、同じ不透明な背景色です。
問題はこれです: コンテンツ セクションに配置されたコンテンツの量に応じて、コンテナー div の高さを大きくしたいのです。しかし、高さを削除すると = 1000px; コンテナ全体が見えなくなります。ナビゲーション バーとメイン セクションの色分けされたボックスは残ります。
なぜこれが起こるのですか?? height = 100%; のようなものを見てきました。使用されていますが、ここでも機能しません。そのようなステートメントが私が探しているものであると想像できます。コンテナがコンテンツ セクションと共にどのように成長するかを見てください。
これはなぜですか? また、コンテナーに含まれるコンテンツ セクションのコンテンツの量に応じて、コンテナーのサイズを大きくしたり小さくしたりするにはどうすればよいですか?
それとも、これはこのタイプの構造についての完全に間違った方法ですか?