0

ドキュメントページと同じ長さの水平バーを持つ単純なページがあります。問題は、ブラウザー ウィンドウのサイズを本体の最小高さより上に変更すると、ドキュメントをスクロールしたときにバーの一部が表示されないことです。

他の同様の質問を検索すると、本文スタイルのマージンとパディングを 0px に設定することで問題を解決できることがわかりました。

私の場合、バーの css からposition:absoluteを削除すると機能します。これを修正して、バーを絶対位置に保つにはどうすればよいですか?

ページの 100% (垂直方向と水平方向の両方) を占める背景画像の div 要素があるため、絶対配置を使用する必要があります。div 要素の後にバーを配置すると、その位置にとどまりません。

<style type"text/css">

html, body
{  
    width: 100%;
    min-width:500px;
    height: 100%;
    min-height:700px;
    margin:0px;
    padding: 0px;  
}

#red {
    position:absolute;
     top:100px;
     width:100%;
     min-width:100%;
     height:37%;
     min-height:300px;
     max-height:330px;
     background: rgb(0,0,0);
     margin: 0px;
    padding: 0px;
}

#background
{
    position:fixed;
     width:100%;
     height:100%;
     background: rgb(56,54,0);
     margin: 0px;
     padding: 0px;
}

</style>

<body>

<div id="background"></div>
<div id="red"></div>

</body>
</html>
4

2 に答える 2

2

position:relativecss で使用できます。

との間に違いがabsoluteありますrelative

絶対の： The element is positioned relative to its first positioned (not static) ancestor element.

相対的： The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.

詳細についてpositionは、http://www.w3schools.com/cssref/pr_class_position.aspまたはhttp://css-tricks.com/absolute-positioning-inside-relative-positioning/を参照してください。

于 2013-03-02T15:14:38.093 に答える
0

背景画像で体の100％をカバーしたい場合は、次を追加します。

background-image: url(../yourImageHere.jpg)

ページの本文のcssに移動し、#backgrounddivを削除します。

とにかくデフォルトでこれに設定されているため、HTMLと本文の幅と高さを100％に設定する必要はありません。必要なものに応じて、次のようにcssを整理しました。

html, body    {  
    margin:0px;
    padding: 0px;
    background-image: url(../yourImageHere.jgp)  
}

#red {
     position:absolute;
     top:100px;
     left:0;
     width:100%;
     min-height:300px;
     max-height:330px;
     background: rgb(0,0,0);
     margin: 0px;
     padding: 0px;
}
于 2013-03-02T15:20:28.307 に答える