私はこの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 の余白があり、ヘッダーが終了する場所がページの最後である必要があります。
これが明確であることを願っています。このようなことを説明したことはありませんが、誰かがここで私を助けてくれることを願っています。これは本当に私を悩ませています。