内部divの最大幅は機能しません

Question

CSSのmax-widthプロパティで練習しています。次のコードでは、内部div .topimage（赤色のもの）が設定されても表示されませんmax-width: 960px;max-height: 200px;何が原因である可能性がありますか？ブラウザウィンドウのサイズに合わせて内側divを拡大/縮小したいので、最大幅/高さを使用しています。

html,body { 
 
\t margin: 0px; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t background-color: rgba(173,192,241,1); 
 
    } 
 

 
.wrapper { 
 
\t height: 800px; 
 
\t max-width: 960px; 
 
\t margin-left: auto; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t margin-right: auto; 
 
\t position: relative; 
 
} 
 

 

 

 
.topimage { 
 
\t max-width: 960px; 
 
\t max-height: 200px; 
 
\t background-color: rgba(255,0,0,1); 
 
}

<div class="wrapper"> 
 
<div class="topimage"> 
 
</div> 
 
</div>

Answer 1

あなたは、幅と高さを必要としています。

最大幅はdivに広がっていません。

使用幅：100％、最大幅：960px;

などの高さの場合は、コンテンツを内部に配置するか、高さを設定する必要があります（例：100px）。

Answer 2

デフォルトでは、空のDIVの幅は100％に設定され、高さは0pxに設定されているため、高さは最大値に影響されないため、赤いボックスは表示されません。

単純な修正は、デフォルトとして100％を追加するだけです。最大幅/高さが有効になります。 （デフォルトでは幅を指定するにはにが必要ですが、デフォルトは100％ですが、独自のデフォルト値を指定することをお勧めします）。

html,body { 
 
\t margin: 0px; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t background-color: rgba(173,192,241,1); 
 
    } 
 

 
.wrapper { 
 
\t height: 800px; 
 
\t max-width: 960px; 
 
\t margin-left: auto; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t margin-right: auto; 
 
\t position: relative; 
 
} 
 

 

 

 
.topimage { 
 
\t width:100%; /* ADDED */ 
 
\t height:100%; /* ADDED */ 
 
\t max-width: 960px; 
 
\t max-height: 200px; 
 
\t background-color: rgba(255,0,0,1); 
 
}

<div class="wrapper"> 
 
<div class="topimage"> 
 
</div> 
 
</div>