ブラウザと同じ次元のCSS div未満30 pxの幅と高さ

私は持っていて、そのdivには、白い枠線を持つアイデアを与えるためにブラウザの幅と同じサイズが30px以下の高さと幅。これらのdivのサイズを変更すると、ブラウザはそれに応じて調整されます。私はスクロールバーを作成するため、境界線を使用しませんでした。15pxは白です。ブラウザと同じ次元のCSS div未満30 pxの幅と高さ

私はこれを試しましたが、スクロールバーも作成します。

<body> 
    <div id="background-wrapper"> 
     <div id="main-wrapper"> 
      <!-- <img src="bla bla" /> --> 
     </div> 
    </div> 
</body> 

#background-wrapper{ 
    background-color:#FFF; 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-color:#FFF; 
} 

#main-wrapper{ 
    background-color:#F00; 
    position:relative; 
    float:left; 
    width:100%; 
    height:100%; 
    top:15px; 
    left:13px; 
}

任意のアイデア??

出典

2011-07-29 peterK

#background-wrapper要素を取り除き、代わりにこれを行うのはなぜですか？

#main-wrapper { 
    position: absolute; 
    left: 15px; 
    right: 15px; 
    top: 15px; 
    bottom: 15px; 
}

例は、hereです。

出典

2011-07-29 11:09:49

のおかげで、いくつかのパディングを試みることができます。それは簡単だった。 2番目の解決策はマージンでは機能しませんでした – peterK

ええ、2番目の解決策が実際に間違っていることに気がついたので、すぐに削除しました。 –

これを試してみてください：

body { 
    background-color: #fff; 
} 

#main-wrapper { 
    margin: 30px; 
}

背景ラッパーの必要はありません。

出典

2011-07-29 11:11:44 JWeary

OPは実際には望んでいません。コンテンツでのみ展開され、ブラウザのビューポートのサイズにはデフォルトではありません。 –

申し訳ありませんが、あなたは絶対に正しいです。私は本当にその質問を理解していませんでした。 – JWeary

あなたは、あなたの内のdiv

<body> 
<div id="background-wrapper"> 
    <div id="main-wrapper"> 
     <!-- <img src="bla bla" /> --> 
    </div> 
</div> 
</body> 

#background-wrapper{ 
background-color:#FFF; 
position:absolute; 
width:100%; 
height:100%; 
background-color:#FFF; 
} 

#main-wrapper{ 
background-color:#F00; 
position:relative; 
float:left; 
width:100%; 
height:100%; 
padding: 30px /*This shouldn't create scrollbars, but provide padding inside your divs*/

}それが働いた

出典

2011-07-29 11:12:16

ブラウザと同じ次元のCSS div未満30 pxの幅と高さ

答えて

関連する問題