固定幅div内の流体幅divの中心をビューポートの上端にピンで固定

Question

ok、ページの中央を50％幅に分割する必要があるページを設計しています - 問題ありません。画面上部に50％幅のヘッダーが必要です。問題ありません。最後に、私はスクロールするときに画面の上部に残るように、固定されたdivにそのヘッダーを置く必要があります - そして、それは私が問題に突き当たるところです。何度も試してみても、おそらく流体幅であり、実際にはピクセルマージンを指定することはできないからです。

ここで私は（今のところ物事をシンプルに保つこと）に取り組んできたコードだ....

<div id="wrapper"> 
    <div id="topwrapper"> 
     <div id="top"> 
      <div id="topleft"></div> 
      <div id="topright"></div> 
     </div> 
    </div> 
    <div id="table"> 
     Lorum Ipsum to fill here. 
     <div id="left"></div> 
     <div id="right"></div> 
    </div> 
</div> 

そして、私のCSS .....

#wrapper { 
    overflow:   auto; 
    position:   absolute; 
    top:    0px; 
    left:    0px; 
    height:   100%; 
    width:   100%; 
    background-image: url('images/background.jpg'); 
} 

#table { 
    position:   relative; 
    margin:   0 auto; 
    width:   50%; 
    background-image: url('images/midmiddle.png'); 
    padding:   50px; 
    padding-top:  130px; 
} 

#topwrapper { 
    position: fixed; 
    margin-left: -112px; 
    left:  50%; 
    width:  50%; 
    z-index:  20; 
    height:  169px; 
} 

#top { 
    position:   relative; 
    margin-left:  -8px; 
    left:    -50%; 
    width:   100%; 
    background-image: url('images/topmiddle.png'); 
    z-index:   20; 
    height:   169px; 
    padding-left:  112px; 
    padding-right: 112px; 
} 

#left { 
    position:   absolute; 
    margin-left:  -162px; 
    top:    0px; 
    width:   112px; 
    height:   100%; 
    background-image: url('images/midleft.png'); 
    z-index:   10; 
} 

#right { 
    position:   absolute; 
    right:   -112px; 
    top:    0px; 
    width:   112px; 
    height:   100%; 
    background-image: url('images/midright.png'); 
    z-index:   10; 
} 

#topleft { 
    position:   absolute; 
    margin-left:  -168px; 
    top:    0px; 
    width:   112px; 
    height:   169px; 
    background-image: url('images/topleft.png'); 
    z-index:   10; 
} 

#topright { 
    position:   absolute; 
    right:   -56px; 
    top:    0px; 
    width:   112px; 
    height:   169px; 
    background-image: url('images/topright.png'); 
    z-index:   10; 
} 

だから私はしました私の箱の両側を繰り返すためにメインの区域内にありますが、トップは私が立ち往生している場所です。

私は実際作品を掲載しましたが、あなたはそれが非常に複雑な問題を回避するだ見ることができるように、ほとんどのマージンが私の側の画像の大きさと関係しているが、#topトップの-8pxは、私が得るように見えることができる唯一の方法であるコードその周りに働く - より簡単な方法が必要ですか？任意の助けを事前に

多くの感謝:)

---

入力に感謝 - 書式設定コードについて申し訳ありませんが、私は私のCSSの前に4つのスペースを置くが、私は、リスト内のそれのように君たちを推測するのではなくライン - 申し訳ありませんが、古い習慣....！

私はトップカバーに左右25％、上端に100％の幅、-120pxの余白を置いて、もう一度動作させることができました...... （私の画像が112ピクセル幅であることを考えると）元のコード（余白 - 8ピクセルのまま）でも見られるように、私はどこかで余分な8ピクセルを取り上げました。それが方程式にどのようにあるのか非常に混乱しています....しかしそれは働いています！

私がしようとしておよそそのフィドル、ではない私は新しい何か:)あなたの助けみんなのため

感謝を学ぶことを楽しみにして精通してる何か:)

Answer 1

どのように見ていますよ#wrapperのマージンをautoに設定しますか？おそらく問題は、ラッパーが固定されていないことです。おそらく、＃ラッパーはテーブルではなく移動していますか？

Answer 2

固定ラッパーを作成し、可視要素を子として配置することでこれを行いました。参照してくださいので、HTMLはhttp://jsfiddle.net/LDVmu/

た

<div id="top"><div>I am at the top!</div></div>

<div>blah blah blah</div>

そして、私が使用CSSは

#top {position: fixed; width: 100%;}

ました

#top div {width: 50%; margin: auto; border: 1px solid red; background: white;}

私はそれが別のネストされたdiv要素を知っている、それはあまり意味的なのですが、私は、これは、これが動作する唯一の方法だと思います。絶対および固定の位置決めと左/右= 0のセンタリングト​​リックは、明示的なピクセル幅でしか動作しないようです。

Answer 3

センターアラインメントが完全に失敗している（つまり、ページの左側に表示されている）のか、それとも中心からやや離れているか、または疑わしいところでは、 。

#topwrapperは、幅が50％であり、また、左が50％である。したがって、ページの半分から始まり、ページの半分（右半分）を占めます。その負のマージンだけが正しい方向に戻されます。負のマージンではなく、leftを25％に減らしてください。次に、#topに負の位置/余白が不要になります。

これは、後で少しずれているかもしれません。もしそうなら、それはおそらく#wrapperに表示されるスクロールバーのためです。 #tableは調整できるので、#topwrapperは固定されていないので、htmlおよび/またはbodyが何をしているかだけに留意してください。 #wrapperでmin-heightへ

変更height、そしてこれを追加します。htmlにスクロールバーが常に存在するようにすることです、決してbodyまたは#wrapperに - ソリューション - ChromeとFirefoxのために、少なくとも、私は他の人にそれをテストしていませんでした：

html { 
    margin:   0; 
    height:   100%; 
    overflow-y:  scroll; 
} 
body { 
    margin:   0; 
    min-height:  100%; 
} 

ノートのカップル...

1. あなたは#wrapperが、その後、ビューポートの100％の高さを持つようにしたい場合は body（ほとんどのブラウザではhtml）にも必要です。
2. #tableのパディングトップは130pxですが、#topwrapperの高さは 169pxですので、Lorem Ipsumは下に隠れてしまいます。私は パディングトップを180pxに増やしました。