3

現在のプロジェクトでは、サイトのタブレットバージョンとモバイルバージョンを構築中で、さまざまなサイズのブラウザー内でテストしていますが、ブラウザーのサイズを変更するときに問題が発生します。

サイトの現在のバージョンは次の場所にあります：http：//beta.residencyradio.com

基本的に、たとえばタブレットでブラウザがどのように表示されるかを確認するためにブラウザのサイズを変更すると、含まれている要素の幅を超えていなくても、空白が右側にレンダリングされ、xスクロールバーが表示されます。

追加することで問題をほぼ解決できoverflow: hiddenますが、これによりxスクロールが完全に無効になります。これは望ましくありません。

私はこれをすべての主要なブラウザーでテストしましたが、すべて同じように応答するので、CSSに関係している必要があります。正確にはわかりませんが、おそらく非常に単純なことで、見逃してしまいました。

どんな助けでも大歓迎です！

よろしくお願いします、マイケル

4

5 に答える 5

1

#seconddivがビューポートの境界の外側にプッシュされているため、その空白が作成されています。margin-leftを使用してそのdivをプッシュする代わりに、代わりにを使用position:absolute;してその問題を修正します。

これが現在の状況です。

#second .content {
    margin-left: 22.8125em;
}

.contentdivの幅はそのまま60emです。

代わりに次のようなものを使用でき、正常に機能するはずです。

#second .content {
    left: 170px; /* adjust to your liking */
    position: absolute;
    width: auto;
}
于 2012-04-12T20:37:27.187 に答える
0

おもう....

cssファイルの変更：

から：

html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}

に

html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
    background-size:100% 100%;
}

ページをズームアウトしたときに、その画像（クールなグラデーション）が水平方向に伸びていないようです

これでしょうか？

于 2012-04-12T20:26:04.093 に答える
0

私は次のことをしました：

html, body {
    width: 100%;
    display: table;
}

また、x方向にスクロールできるようにしながら、奇妙な白い間隔を削除しました。

于 2013-12-15T18:39:20.523 に答える
0

私は通常それを修正します

 html {
  overflow-x:hidden;  
 }

それは機能し、空白を隠し、サイトを再スケーリングする必要があります

于 2014-05-11T20:50:47.647 に答える
0

試してみました

html {
overflow-x:hidden;
}

動作しませんでした。だが..

body {
overflow-x:hidden;
}

やりました。

于 2019-06-04T02:04:53.410 に答える