HTML と CSS をいじり始め、ヘッダーを保持するメインの div と、コンテンツとサイドバーの div の両方をフローティングにするレイアウトを作成することにしました。これらは両方とも、周囲に 2% の余白と境界線があります。
フッターとヘッダーを除くすべての高さが 100% ですが、フローティング div はメイン div の下部から突き出ています。
これは、メイン div と 2 つのフローティング div の CSS コードです。
.main {
clear: both;
background-color: rgb(32, 32, 32);
width: 85%;
margin: 0 auto 0 auto;
height: 100%;
}
.content {
float: left;
width: 66%;
height: 100%;
background-color: rgb(20, 20, 20);
padding: 2% 2% 2% 2%;
margin: 2% 0 2% 2%;
}
.sidebar-right {
width: 20%;
float: right;
height: 100%;
background-color: rgb(20, 20, 20);
padding: 2% 2% 2% 2%;
margin: 2% 2% 2% 2%;
ここに完全なコードを挿入する必要があるかどうかわからないので (最初の投稿)、jsFiddle を使用しました
jsFiddle に示すように: http://jsfiddle.net/Jess_Nielsen/ePM76/ フルスクリーン バージョン: http://jsfiddle.net/Jess_Nielsen/ePM76/embedded/result/
ちょっとしたことを見逃していると確信していますが、質問フォームからの提案を2回行ったので、あなたの1人が解決策を持っていることを願っています.
注意: テキストのピクセルは、後で em のピクセルに置き換えられます。