2

私はこのdivを持っています:

<!------ CONTENT ------>
<div id="content">
  <div class="top">
  I am cool<br />
  I am cool<br />
  I am cool<br />
  I am cool<br />
  </div>
</div>
<!------ /CONTENT ------>

この CSS では:

#content{
    height:auto;
    width:100%;
    background-color:#FF0000;
}

#content .top{
    margin:15px 35px 35px 35px;
    padding:20px;
    width:inherit;
    height:inherit;
    position:absolute;

    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);

    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:rgba(224,224,224,.92);
}

これにより、コンテンツ div がブラウザー ウィンドウと同じ幅になり、.top div のサイズがその中に収まるようにサイズ変更され、パディングとマージンも確保されると思いました (それを十分に説明する方法がわかりません)が、そうではありません. 代わりに .top は画面と同じ幅ですが、マージンのためにウィンドウの外側のどこかに拡張され、別のマージンが追加され、次のように水平スクロール バーが表示されます。

スクリーンショット

ご覧のとおり、35 の余白があり、ヘッダーが終了する場所がページの最後である必要があります。

これが明確であることを願っています。このようなことを説明したことはありませんが、誰かがここで私を助けてくれることを願っています。これは本当に私を悩ませています。

4

2 に答える 2

1

float を無視する場合は、absolute とその同類を配置します。width:100% は、最も近い囲みボックスを指します。

私の推測では、コンテンツの周りに、あなたが思っているほど広くない要素があると思います.

( *{border: 1px solid red} をデバッグ用に css のどこかに植えても問題はありません ;) )

于 2012-06-10T21:52:13.727 に答える
0

あなたの問題は、内側のコンテナの幅をwidth指定し、それが追加されていることです。marginpadding

なぜあなたがposition: absoluteここを使っているのか理解できません。

これは期待どおりに動作していますか?

于 2012-06-10T21:49:22.250 に答える