可変の高さ,100％-widthsub-menuこれは通常、ページの下部に配置されています。 小文字のウィンドウをブラウザで表示すると、ページ上部に表示されます。divを下から上へ移動する方法
<div id=container style='height: 500px; background: red;'>
<div id=content style='width: 100%; background: green;'>content</div>
<div id=sub-menu style='width: 100%; background: blue;'>sub-menu</div>
</div>
がどのようにCSSを使用してページのコンテンツをブロックすることなく、トップに高さ可変sub-menuを取得することができます：ページのHTMLの構造は、次のでしょうか？
あなたのサブメニューの高さを知っている場合、あなたはあなたの#contentと#sub-menuの両方に#containerとposition: absoluteにposition: relativeを使用してそれを行うことができます。また、#containerには、の高さに等しい上限値を与える必要があります。
問題はメニューは動的です。私がいるページによっては、メニュー自体にリンクが増えたり、リンクが少なくなったりする可能性があります。 –
これは非常に興味深い問題です。私は少しのJavaScriptがこのトリックを行うことができると言いたいと思いますが、誰かが純粋なCSSソリューションを考え出すことができるのは本当に興味があります。 – Ana
私はあなたの作品をCSS3で見ましたが、あなたが描いた太陽系でかなり印象的です。あなたがそれをすることができないなら、私は他人ができることを疑う。あなたのソリューションをjavascriptと組み合わせなければなりません。 –
メディアクエリーの設定方法がわかりません。これはあなたのhtml構造では不可能かもしれないので、これを編集する必要があります。
#sub-menu
{
position:fixed;
top:0;
width:100%;
background-color:#f00;
}
上記のコードは、小さな画面用のメディアクエリ内に配置する必要があります。
あなた自身が指摘したように、html構造を変更しなければ動作しません。サブメニューがコンテンツをブロックします。私はフロートのように動作するものを探しています。 –
'position：fixed'は素晴らしいですが、私はそれをモバイル用に使用しません、まだ多くの問題があります - http://bradfrostweb.com/blog/mobile/fixed-position/を確認してください – Ana
ここでは、CSSのメディアクエリソリューションです。
/* Mobile Portrait Size */
@media only screen and (max-width: 479px) {
position:absolute;
top:0px;
height:auto; /* So that the content wont be lost with the reduction in width. */
}
divを配置した方法や、それをフィドルでリンクする方法について、もう少し説明すれば参考になります。
あなたはdisplay: table-header-group;を使用することができます...
HTML：
<div id=container>
<div id=content>content</div>
<div id=sub-menu>sub-menu</div>
</div>
CSS：
#container {
display: table;
width: 100%;
}
@media (min-width: 500px) {
#sub-menu {
display: table-header-group;
}
}
は、あなたが任意のメディアクエリを使用していますか？デバイスが小さな画面であれば、どうやって作業していますか？ – Undefined
@Sam：はい、私は、ウィンドウの幅を指標としてメディアクエリを使用しています。 –
どのように下に配置していますか？位置：固定、または要素の自然な流れ？ – ezakto