html - スクロールとcssは「右：0px」に合わせます

Question

HTML ページで、いくつか<div>の s を "right: 0px" に揃えると、予想どおり、すべてがとてもきれいに見えます。ただし、ブラウザウィンドウを小さくして水平スクロールバーが表示されると、ページを右にスクロールすると、(背景色の代わりに) 予期しない空白が表示されます<div>。私<div>のは、ページの表示領域に対して相対的に配置されているようです。以下のサンプルコードを参照してください。

<html>
    <head>
        <style>
        <!--
        #parent {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background-color: yellow;
        }

        #child {
            position: absolute;
            left: 100px;
            top: 300px;
            width: 1000px;
            height: 400px;
            background-color: blue;
        }
        -->
        </style>
    </head>
    <body>
        <div id="parent"><div id="child">some text here</div></div>
    </body>
</html>

「right: 0px」プロパティを、表示領域だけでなく、ページ全体のサイズに対してコントロールを整列させる方法はありますか?

ありがとう。

score 4 · Accepted Answer

問題は、定義ごとにスクロール可能であるため、親要素の「絶対」位置です。

位置を「固定」に設定し、追加の属性オーバーフローを「スクロール」に設定すると、期待どおりに表示されます。

#parent {position: fixed;
         overflow: scroll;         
         left: 0px;
         top: 0px;
         right: 0px;
         bottom: 0px;
         background-color: yellow;
        }

score 0 · Accepted Answer

あなたの場合、絶対配置を使用する必要がありますか? それ以外の場合は、左と右のプロパティを削除して、単純に width: 100%; を使用できます。

score 0 · Accepted Answer

追加する場合

html{ border: 3px solid red }

スタイルシートに 'right' プロパティをページの端に設定していることがわかります。

戦略を再考する必要があると思います。何を達成しようとしていますか？

score 0 · Accepted Answer

私の答えは、スクロールの整列を変更したいですか？「右揃え」スクロールの例。

#ex {overflow: scroll}

score 0 · Accepted Answer

絶対に必要な場合を除き、絶対位置を使用しないでください。代わりにマージンとパディングを使用してください。また、マージンとパディングをリセットすることを忘れないでください。ブラウザがデフォルトとして持っているものから始めないようにしてください。

score -3 · Accepted Answer

右？下？これらは実際の CSS 属性でさえありますか? 通常、上/左、次に幅/高さを設定します...

html - スクロールとcssは「右：0px」に合わせます

6 に答える 6

Related

Reference