私はテストとして何かを試していましたが、正しい方法でプログラムする方法をあまり知らなかった。誰かが私を助けてくれることを願っていました。メニューのサイズでコンテンツを調整する
私は達成したいことについてもう少し明確になるようにスケッチを作った。左のメニューは、その正確な位置にとどまる必要があります。
のメニューに次のコンテンツがメニュー自体よりも小さいだろうと言ってみましょう。緑色のセクションがメニューの下に表示されます。これは私が達成したいことではありません。私は、コンテンツ要素が小さすぎる場合、Javascriptでコンテンツの高さを拡大することを考えていました。
希望の結果を達成するための正しい方法だと思いますか？またはこれを達成するためのより良い/よりクリーンな方法を提案できますか？ （jsfiddleの例は素晴らしいでしょう）
ありがとうございます！
編集：メニューの高さが動的である必要があることをお知らせしたいと思います。たとえば、余分なメニュー項目を追加するとどうなりますか？
このような意味ですか？
私はここでチェックボックスハック:)
を使用していてちょうど最近のブラウザでのみ動作警戒するには、コードではなくフロートを使用することにより、
*{
\t box-sizing:border-box;
\t margin:0px;
\t padding:0px;
}
#head{
\t background-color:#000;
\t border-bottom:#333 solid 1px;
\t display:block;
\t padding:10px 0px 0px 10px;
}
#head ul{
\t background-color:#f00;
\t display:block;
\t width:150px;
\t position:relative;
\t list-style:none;
\t margin:0px;
\t text-align:center;
}
#head li{
\t display:none;
}
#head input{
\t display:none;
}
#head input:checked ~ li{
\t display:block;
}
#head input:checked ~ label{
\t background-color:#511;
\t color:#fff;
}
#head label{
\t font-family:Constantia;
\t width:100%;
\t padding:10px 0px;
\t color:#333;
\t border-bottom:#111 dotted 1px;
\t display:block;
\t font-weight:bold;
\t text-transform:uppercase;
}
#head label:hover{
\t background-color:#511;
\t color:#fff;
\t cursor:pointer;
}
#head a:link{
\t background-color:#f00;
\t width:150px;
\t display:block;
\t color:#111;
\t text-decoration:none;
\t border-bottom:#333 solid 1px;
\t padding:10px;
\t float:left;
\t margin-right:10px;
}
#head a:visited{
\t color:#111;
}
#head a:hover{
\t background-color:#911;
\t color:#fff;
\t border-bottom:#211 solid 1px;
\t font-weight:bold;
}
#body{
\t padding:10px;
}<div id="head">
\t \t \t <ul>
\t \t \t \t <input type="checkbox" id="menu" />
\t \t \t \t <label for="menu">Menu</label>
\t \t \t \t
\t \t \t \t <li><a href="#">Link 1</a></li>
\t \t \t \t <li><a href="#">Link 2</a></li>
\t \t \t \t <li><a href="#">Link 3</a></li>
\t \t \t </ul>
\t \t </div>
\t \t
\t \t <div id="body">
\t \t \t <h1>Content</h1>
\t \t \t <p> All my content sits here what am I suppose to do?</p>
\t \t </div>をsnipetです位置の絶対値よりも絶対に、ヘッダーの外に出るだろうが、絶対に位置を適用するためにそれを変更しなければならないなら、ヘッダーの下にコンテンツであると思われることをブラウザに知らせるが、それの横または下ではなく、むしろナビゲーションの背後にシフトしていなければなりません。
ナビゲーションの下に行く前に内容を少し大きくしたくない場合は、ウィンドウが小さくなったらコンテンツが下に移動することがわかります。min-widthを#body{}タグに設定してください。
スタックオーバーフローはコード作成サービスではありません。 – Thielicious
'min-height：321px;'についてはどうですか？ – jayms