3

私はこれらすべてに比較的慣れておらず、先週ページに取り組んできました。これまでのところ、このサイトは非常に便利であることがわかりましたが、ページをブラウザウィンドウに垂直方向に完全に動的に合わせることができないようです。要素を縮小して、垂直スクロールバーなしですべてがブラウザに収まるようにします。この理由は単純です。モバイルアプリにインスパイアされたランディングページになり、ボタンを押すと、必要な場所に移動します。ただし、ユーザーの画面サイズ/解像度は異なるため、ページは流動的である必要があります。

ここに示すように、ブラウザの幅に応じてページを縮小することができました（jsFiddle Demo）。

 container {
    padding: 1% 1%;
    width: 80%;
    height: 100%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    /*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

ご覧のとおり、すべての要素はブラウザの幅に基づいて動的に縮小します。ただし、1024x768の画面で表示すると、「ボタン」の一番下の行がブラウザによって半分切り取られ、ユーザーは残りを表示するためにスクロールする必要があります。

このサイトでいくつかの解決策を試しましたが、うまくいかないようです。ここにいる誰かが、ブラウザの幅と高さに動的に調整するのを手伝ってくれますか？

私が望むものをよりよく説明するために、これは私が動的なサイズ変更の例を見たい効果です

これが私の問題が何であるかを正確に示す画像です解像度の違いhttp://img404.imageshack.us/img404/5840/resolutionissue.jpg

ボタン間の間隔はパーセンテージの間隔のために縮小しますが、ウィンドウが水平方向にのみ調整されている場合、画像は収まるように縮小することに注意してください。全部をブラウザウィンドウに押し込むために必要です。

4

1 に答える 1

0

コンテナーと子要素 (必要な場合) が画面を垂直方向に満たすようにするには、これらの要素の親全体に 100% の高さの値も適用する必要があります。あなたの場合、CSSに次のルールを適用します。

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

これにより、コンテナーはブラウザー ウィンドウの高さの 100% に適応します (コンテナーは、html タグの子である全体的なボディの子であるため)。ただし、パディングを適用しているため、垂直スクロール バーは引き続き表示されます。したがって、適用するパディング/マージンに関連して、コンテナー要素の高さ % を減らす必要があります。あなたのケースでは、上記の Kai Qing が示唆しているように、コンテナの高さを 98% に変更する必要があります。

于 2013-02-13T12:53:10.483 に答える