CSS：child-div要素の高さと幅をXピクセルで親要素の幅より小さくする

ウェブサイト用のテンプレートを作成していて、いくつかの非常に基本的なCSSでいくつかの問題が発生しています。CSS：child-div要素の高さと幅をXピクセルで親要素の幅より小さくする

基本的には、div要素を使用してサイトをセクションに分割しようとしていますが、各セクションに半透明の黒色の背景とその周囲に完全に透明な境界線を含める必要があります。

考えられるのは、背景イメージがあり、ニュースアイテムが実際には互いに触れたり重なり合わない（つまり周囲に余白がある）黒いブロックに分割されるということです。黒いブロックはわずかにシースルーされており、それらの間の領域（サイズが数ピクセルになります）には空のコンテンツがあり、背景だけを見ることができます。

次のように私はこれまで持っていることは次のとおりです。

サイト：

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" href="mainPage.css" /> 
    <title>Some site</title> 
</head> 

<body> 
    <div class="container"> 
     <div class="header"> 
      <img src="images/SomeImage.bmp" alt="ImageName"/> 
     </div> 
     <div class="latestBlockLeft"> 
      <div class="transDiv"> 
       <p> latestBlockLeft1 </p> 
      </div> 
     </div> 
     <div class="randomBlockRight"> 
      <h1> Heading test</h1> 
      <p> randomBlockRight </p> 
     </div> 
     <div class="latestBlockLeft"> 
      <div class="transDiv"> 
       <p> latestBlockLeft2 </p> 
      </div> 
     </div> 
     <div class="latestBlockLeft"> 
      <div class="transDiv"> 
       <p> latestBlockLeft3 </p> 
      </div> 
     </div> 
     <div class="menuStrip"> 
      <p> menuStrip </p> 
     </div> 
     <div class="sectionedNews"> 
      <p> sectionedNews </p> 
     </div> 
     <div class="disclaimer"> 
      <p> disclaimer </p> 
     </div> 
    </div> 
</body>

関連するCSSコード：

html, body {padding: 0px; margin: 0px; height: 100%;} 

body 
{ 
    background-color:white; 
    font-size:100%; 
    background-image:url('images/Famicom cartridges.jpg'); 
    background-attachment:fixed; 
} 

h1 
{ 
    background-color:transparent; 
    color:#8B0000; 
} 

/* Link style */ 

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:active {text-decoration:underline;} 

/* Classes */ 
.container 
{ 
    background-color:beige; 
    width: 1020px; 
    margin: 0 auto; 
} 

.transDiv 
{ 
    position:relative; 
    float:left; 
    color:white; 
    width:100%; 
    height:100%; 
    background-color: black; 
    opacity: 0.9; 
    filter:alpha(opacity=90); /* For IE8 and earlier */ 
} 

.header 
{ 
    height: 120px; 
    width: 100%; 
    background-color: black; 
margin: 0 auto; 
opacity:1; 
filter:alpha(opacity=100); /* For IE8 and earlier */ 
} 

.latestBlockLeft 
{ 
/* padding-top:3px; 
padding-right:3px; */ 
    height: 170px; 
    width: 70%; 
    /* background-color: yellow;*/ 
    float: left; 
} 

.randomBlockRight  ........... and so on

余白を使用しようとすると何が起きるかは、余白がdivディビジョンの周りを回って、ページ上の他の要素を押し込んでしまうことです。私はこれを各要素の正確なピクセルサイズを使って作ることができましたが、divブロックが私のメインコンテナdivの幅の70％を占め、Xpixがそのボックス内のマージンを見て空になっていると言うことができるようにしたい。私はこれらの場所に私の透明な背景が現れないようにします。どのようにこれを行うのですか？正しい設計アプローチをとっていますか？

ありがとうございます！

出典

2011-11-14 8bitcartridge

"divitis"の症例があります。 –

パディング、透明なボーダー、幅/高さをパーセントで試すことができます –

Jesse：あなたのコメントは、私がそうかもしれないと思われるデザインの選択肢が悪いことを意味します。私は間違いなく代替デザインを見ていきます（一般的に受け入れられている用語であると思われるdivitisを読む） Paul：幅/高さをパーセントで考えましたが、これは私にとってはうまくいきません。同じtransDiv divブロックを様々な高さ/幅を持つさまざまなdiv要素の内側に貼り付けると、一貫した5ピクセルの境界線サイズが得られます。パディング/透明なボーダーはどこに置くのですか？私は両方の場所（transDivブロックとlatestBlockLeftブロック）を試してみましたが、どちらもうまく動作していませんでした。 – 8bitcartridge

<div id="parent"><div id="child"></div></div>

1）親divには、「position：absolute」または「position：relative」が必要です。次に、これを行うことができます：

#parent { 
    display: block; 
    position: relative; 
} 

#child { 
    position: absolute; 
    display: block; 
    top: 0; 
    right: 0; 
    bottom: -10px; // HERE IS THE TRICK! 
    left: 0; 
}

このソリューションでは、親のサイズは、子供のサイズを設定します！

子供が親との相対的な高さを持つようにするには、ここで高さ：、などのパラメータを与えることができます。

出典

2013-11-21 12:20:31 peterh

ありがとう！これは動作するようにも見えます！ – 8bitcartridge

CSS：child-div要素の高さと幅をXピクセルで親要素の幅より小さくする

答えて

関連する問題