10

通常、ページの下部に配置される可変の高さ、幅 100%があります。 小さなウィンドウsub-menuのブラウザで表示したときにページの上部に表示されるようにしたい。ページの HTML の構造は次のとおりです。

<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>

sub-menuCSSを使用してページのコンテンツをブロックせずに、可変高さを一番上に取得するにはどうすればよいですか?

4

4 に答える 4

3

サブメニューの高さがわかっている場合は、との両方position: relativeで on#containerとonを使用して実行できます。の高さに等しいトップ値も指定する必要があります。position: absolute#content#sub-menu#container #sub-menu

于 2012-05-26T09:09:15.857 に答える
1

メディアクエリがどのように設定されているかわかりません。これは、HTML 構造では不可能な場合があるため、これを編集して機能させる必要がある場合があります。

#sub-menu
{
  position:fixed;
  top:0;
  width:100%;
  background-color:#f00;
}

上記のコードは、小さな画面のメディア クエリ内に配置する必要があります。

于 2012-05-26T09:04:47.440 に答える
0

これが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をどのように配置したか、またはそれをフィドルとリンクすることによって、もう少し説明があれば役立つでしょう。

于 2012-05-26T10:12:11.600 に答える