0 
  <div class="main"></div>
   <style>
        .main{ background-color:black;
               position:absolute;
               width:???;
               height:??;
   </style>

divを中央にmain配置し、画面の両側から20pxのギャップを空けて、高さと幅をほぼ100％にする方法。

4

7 に答える 7

2

ブロック要素の幅は、デフォルトですでに100％になっています。

あなたがする必要があるのはあなたの「ギャップ」を作成するためにパディングまたはマージンを追加することです。

<style>
    .main{ background-color:black;
           position:absolute;
           margin: 0 20px;
           height:100%;
      }
</style>

編集

私はあなたの絶対的なポジショニングを逃しました。
絶対測位では、これを使用します：

#main {
background: #a00;
position: absolute;
top: 0; 
left: 50px; 
right: 50px;
height: 100%;
}

デモフィドル

于 2012-08-17T11:07:10.023 に答える
1

ねえ今このcssを定義します

<style>
   .main{ 
       background-color:black;
       position:absolute;
       margin:20px;
       left:0;
       right:0;
       top:0;
       bottom:0;
    }
</style>
于 2012-08-17T11:12:59.043 に答える
0

divこれにより、左側と右側の50pxのスペースに中央揃えで配置されます。

.main {
    margin: 0 50px;  /* [top,bottom] [left,rigth] shorthand syntax */
    width : 100%;
}
于 2012-08-17T11:06:49.090 に答える
0

できるよ ：

<style>
   .main{ background-color:black;
          position:absolute;
          width:100%;
          height:100%;
          margin:20px;
 </style>
于 2012-08-17T11:08:15.127 に答える
0

calc()CSS3で新しい属性を使用できます。

.main
{ 
    margin: 0 auto;
    background-color:black;
    color: #fff;
    position:absolute;
    width: -webkit-calc(100% - 20px);
    height: -webkit-calc(100% - 20px);  /*repeat with other browsers codes*/
}

これにより、divは100％幅/高になりますが、中央に保持したまま20pxを削除します。

ITは、Firefox 4.0、Chrome 19、Safari 6のIE9（以下ではありません）で使用できます。したがって、これは最善の解決策ではない可能性があります。

http://jsfiddle.net/Kyle_Sevenoaks/wVUat/

于 2012-08-17T11:13:11.850 に答える
0

絶対測位を使用しているので、これを試すことができます。

<div class="main"></div>

<style>
.main {
background-color: black;
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 100%;
}
</style>
于 2012-08-17T11:17:34.183 に答える
-1

以下の解決策はどうですか？

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <style>
        #mask {
            background-color: rgba(0, 0, 0, .5);
            opacity: 0.5;
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="mask" />
</body>
</html>

http://jsfiddle.net/balkon_smoke/yPF8Y/2/で見つけてください

于 2012-08-17T11:17:51.150 に答える