したがってmain、Web サイト全体のコンテンツを含むというクラスがあります。私はウェブサイトの構築の初期段階にあるので、終了タグや終了引用符の欠落など、コードにエラーがないことを確認したいと思います。これを確実にするのに役立つことの1つは、要素をカラフルで囲むことです国境。
メインの div は赤い境界線で囲まれているはずですが、境界線がdivコンテナー全体を囲んでいないため、マークアップに問題があることがわかります。私はこれを長い間デコードしようとしてきましたが、成功していません。ここにいる誰かがトラブルシューティングを手伝ってくれることを願っていましたか?
メイン div の高さをインライン スタイルとして設定しました。
<div id="main" style="width:900px; margin-left:auto; height:1200px; margin-right:auto;">
コンテンツに合わせて拡大したい場合は、高さを削除してください。そうしないと、1200px に固定されます。
メインの div の高さは 1200px で、コンテンツはこの幅よりも大きいため、オーバーフローしているコンテンツに境界線が表示されず、表示される高さを増やすことで確認できます。
これはあなたの特定の質問には答えないと思いますが、マークアップのデバッグとその品質のチェックに関しては、holmes.css「The CSS Markup Detective」http://www.red-root.com/sandbox/holmes/を使用でき ます。マークアップのエラーと間違い。開発ビルドにファイルを含めますholmes.css(または、そのリンクで提供されているブックマークレット ツールを使用します)。
メインの div の高さは 1200px です...これを削除し、メインの div をそれを含む高さに拡張します。
jsfiddle サンプルで背景色を削除すると、赤い境界線が「カルーセル」div の下に折り返されていることがわかります。これは、「メイン」の div にハードコードされた高さを指定したためです。これが最小の高さになりたかったためか (この場合は使用する必要がありますmin-height)、それとも絶対的な高さにしたかったためかはわかりません。どちらにしても、ボックスの中身がコンテナからはみ出しているため、赤い境界線の下部が見えません。
「メイン」に正確にその高さを持たせ、スクロール バーを持たせたい場合はoverflow-y: auto;、「メイン」div のスタイリングに追加します。それ以外の場合は、前述のように、高さの宣言を完全に削除するか、min-height: 1200px;代わりに「メイン」の div を使用してコンテンツを保持するようにします。