web-dev-qa-db-ja.com

ページのサイズ変更中にdivが移動しないようにします

私はCSSを初めて使い、ページを立ち上げて実行しようとしています。ブラウザウィンドウのサイズを変更してからすべてが動き出すまで、私はニースページだと思っていたものをうまく作成できました。なぜこれが起こっているのか分かりません!!

誰かアドバイスをください。ウィンドウのサイズを変更するとき、「オブジェクト」はウィンドウのサイズ以外の場所に留まるようにします。たとえば、ウィンドウの下隅を左上にドラッグすると、右下に表示されているものが表示され、スクロールバーが表示されますが、左上隅のオブジェクトは正確に表示されます。

私は意味を成していますか？

私のページの労働条件を見てください： http://aimmds1.estheticdentalcare.co.in/

次に、右のサイズを左にドラッグして、ブラウザウィンドウのサイズを変更してみてください。そして、ヘッダーのコンテンツとメニューバーを見てください..彼らは下にジャンプします、ヘッダーのコンテンツも下にジャンプして、オーバーフローしました：隠し; ..しかし、私が理解しているように、これはすべて正しい方法ではありません。

ここでhtmlとCSSを見つけてください： http://jsfiddle.net/swati/hCDas/

私はすでに ウィンドウのサイズ変更時にdivが移動するのを防ぐ を試しました。min-width：820pxを設定しようとしました。 div headerの場合、メインにはdivが含まれますが、それでは解決しません。

あなたの助けを期待してありがとう。

htmlcsslayoutresize
21
swati saoji

1-BODY CSSからマージンを削除します。

2-すべてのhtmlをラッパーでラップ<div id="wrapper"> ... all your body content </div>

3-ラッパーのCSSを定義します。

これにより、ページの中央にすべてがまとめられます。

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}
31
Diodeus - James MacFarlane

幅、高さ、マージンなどの指定に使用できる測定には、相対と固定の2種類があります。

相対

相対測定の例としては、使用したパーセンテージがあります。割合は、含まれる要素に関連しています。含まれる要素がない場合、それらはウィンドウに相対的です。

<div style="width:100%"> 
<!-- This div will be the full width of the browser, whatever size it is -->
    <div style="width:300px">
    <!-- this div will be 300px, whatever size the browser is -->
        <p style="width:50%">
            This paragraph's width will be 50% of it's parent (150px).
        </p>
    </div>
</div>

別の相対的な測定値は、フォントサイズに関連するemです。

一定

固定測定値の例はピクセルですが、固定測定値はpt（ポイント）、cm（センチメートル）などにすることもできます。固定（絶対とも呼ばれます）測定値はalways同じサイズです。ピクセルは常にピクセルであり、センチメートルは常にセンチメートルです。

サイズに固定測定を使用する場合、ブラウザのサイズはレイアウトに影響しません。

5
punkrockbuddyholly

むしろ静的な幅を使用し、画面サイズに応じてページのサイズを変更したい場合は、 メディアクエリ をご覧ください。

または、ヘッダー、ナビゲーション、コンテンツなどの要素に最小幅を設定できます。

3
Adaz

はじめに、htmlに終了タグが欠落している「エラー」が多いようです。_<body>_の内容を固定幅_<div style="margin: 0 auto; width: 900px>_でラップして、 _body {margin: 0 10% 0 10%}_

1
T I