3

私は次のdivを持っています:

#leftmenu{
position: fixed;
top: 50%;
margin-top: -65x;
height: 130px;
}

この div はページの中央に垂直に配置され、固定されています。ウェブページは非常に背が高いですが、div は常に画面の中央に表示されます。これらのプロパティを使用すると、ウィンドウのサイズを変更すると、現在のウィンドウ サイズの 50% のままにしておく必要があるため、メニューが移動します。私が欲しいのは：
1）ページをロードするとき、画面の解像度に応じて、divは50％上に配置する必要があります（コードでOK）
2）ウィンドウのサイズを変更した場合、固定したままにする必要があります。トップレベルを強制する「min-top」などのプロパティがあればいいのにと思いましたが、存在しません。手伝って頂けますか？

4

2 に答える 2

3

1）ページをロードするとき、画面の解像度に応じて、divは50％を上に配置する必要があります（私のコードでOK）

提案：（画面解像度に応じて）メディアクエリが必要な場合は、画面解像度に応じてdivに特定のプロパティを持たせるCSSです。デフォルトの960px幅があり、画面が表示され330pxたらこれを使用できるとします。

@media only screen and (max-width: 330px) {
  /*change the div position or what so ever. 
  This will work like javascript but is better!*/
}

次に、div の位置または幅と bla bla のスタイルの変更が表示されます。

2) ウィンドウのサイズを変更する場合は、固定したままにする必要があります。トップレベルを強制する「min-top」などのプロパティがあればいいのにと思いましたが、存在しません。

はい、何かを書かずにやりたいことをするコードはありません。このために、これらの行を書く必要があります。

  1. stay fixed? _

    これを書きます：

    div {
    position: fixed;
    }

    の中に入る必要がありmedia queryます。次に、サイズを変更すると、2 番目の画面に適した 2 番目のスタイルが取得されます。

  2. トップレベルに強制しますか? これを使用できます：

    div {
    position: absolute;
    top: 0;
    }

が必要であるtop: 0;ことを確認しますmargin-top: 0;。このコードを使用できます。

編集：

あなたはコメントにこれを投稿しました：

私はメディアクエリをグーグルで検索しました。それは私の問題の解決策ではないと思います。さまざまな解像度は問題ではありません。実際の css では、すべての解像度で div が 50% 上に配置されます。問題は、(すべての解像度で) ブラウザー ウィンドウのサイズを変更するときです。ウィンドウのサイズを変更してもメニューが上下に動かないようにしてほしい

このため、問題はほぼ完全に反対です。問題はパーセンテージです.divのサイズを変更すると、divが短くなったり大きくなったりします! それはその位置を変えています。

これをbodyタグに使用できます。

body {
min-width: 900px;
max-width: 900px;
}

900pxこのように、サイズを短くしたり大きくしたりしても、常にそのままになります。メディアクエリを使用して変更するまで、幅は変更されません。今すぐあなたの質問に答えていただければ幸いです。

于 2013-10-03T11:47:17.937 に答える
0

ブラウザ ウィンドウに対する相対的な位置です。

position: absolute;に対して相対的に配置するために使用しdocumentます。

于 2013-10-03T11:37:48.680 に答える