0

ページの body タグに overflow-x:hidden を配置して、ウィンドウを超えて拡張されたコンテンツが表示されないようにします。スクロールバーは表示されませんが、左/右にスクロールしてコンテンツを表示できます (overflow-x の目的を無効にします)。

-ms-overflow-x: 問題も解決しません。

ラッパー 900px があります。

ラッパー内には、内部に div があります。

width:100%;
padding-right:300px;
position:absolute;
left:200px;

内側の div を、ウィンドウをスクロールせずにウィンドウの右側にぶら下げるようにします (左側に 200 ピクセルのスペースを残します)。

何か助けはありますか?ありがとう!

4

2 に答える 2

0

より多くのHTML/CSSが役立つでしょうが、あなたが今持っているものを考えると、私の最初の考えは、ラッパーがまだposition: static(HTML要素のデフォルト)に設定されているということです。

ラッパーに追加position: relativeすると、ラッパー内に絶対位置の要素が含まれるため、オーバーフロー制限に制限する必要があります。

さらに、box-sizingプロパティとW3Cボックスモデルがどのように機能するかを調べることもできます。つまり、パディングは要素の幅に追加されるため、実際には(100%+ 300px)になり、コンテナよりもサイズが大きくなります。

を台無しにしたくない場合は、絶対divにbox-sizing追加max-width: 100%して、コンテナーから成長しないように強制することもできます。

于 2012-12-04T15:36:44.633 に答える
0

div の幅は 100% であるため、div は常にビューポートの 100% に収まるため、オーバーフローが発生することはありません (body タグのサイズを変更していないと仮定します)。

パディングに関しては、パディングは幅の後に追加されるため、div はコンテナー (body タグ) の幅の 100% であり、パディングは右に 300 ピクセル追加されます。ビューポートの外にあるので見えません。

div に明示的なサイズ幅を与えて、そのように実験することをお勧めします。

何を達成しようとしているのかを理解するために、マークアップの例を確認することも役立つ場合があります。

于 2012-12-04T15:13:22.027 に答える