DIVは、指定した背景色で表示されない

私はCSSで次のHTMLコードを持っている：あなたが見ることができるようにDIVは、指定した背景色で表示されない

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style type="text/css"> 
     div.scroll 
     { 
      background-color:#00FFFF; 
      position:absolute; 
      top:0%; 
      left:0%; 
      width:10%; 
      height:100%; 
     } 

     div.hidden 
     { 
      background-color:#00FF00; 
      position:absolute; 
      top:0%; 
      left:50%; 
      width:20%; 
      height:100%; 
     } 

     div.menu 
     { 
      position:absolute; 
      top:70%; 
      left:20%; 
      width:80%; 
     } 
    </style> 
</head> 

<body> 
    <p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p> 

    <div class="menu"> 
     <div class="scroll">Scroll: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> 
     <div class="hidden">Hidden: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> 
    </div> 
</body>

は私が色を持っている部門の2をしたい - 彼らは私とはしませんが理由を理解できません。ファイルの拡張子はhtmlで、IE7とFF 3.0.3の両方を使ってテストしました。

私が最も困惑しているのは、色を示すW3Cの学校の例のほぼそのままのコピーです！例にリンク：W3C example。

出典

2012-01-20 BigMac66

W3Schoolで見つかったものが、期待通りに機能しなかったことは驚くことではありません。 http://w3fools.com – Phrogz

を参照してください。考えていない - 私は笑いながらも:) – BigMac66

問題はheight:100%;です。これは要素が親のすべての高さを使用することを意味します。この場合は<div class="menu">です。内容はすべてabsoluteであるため0pxです。

divのテキストのサイズを変更したい場合は削除するか、両方のdivに同じ高さを適用する場合は高さをピクセルに設定します。

出典

2012-01-20 18:49:45 Baldrick

これは正解です。 'overflow：hidden'をさらに設定すると、要素の高さがゼロであることを示すので、すべてのコンテンツがオーバーフローして要素の領域外に表示されます（表示されている場合）。 –

私は希望の結果を達成するために私が別の変更を加えることを可能にしていたことをより完全に説明したので、この回答を選択しました。具体的には、スクロールまたは非表示から高さ属性を削除しませんでしたが、メニュー属性に高さ：30％を追加しました。メニューのdivが高さを持つと、すべてが私が望むやり方で動作しました。ありがとう。 – BigMac66

div.scrollとdiv.hidden CSSクラスからheight: 100%;を削除してください。

出典

2012-01-20 18:43:04 techfoobar

DIVは、指定した背景色で表示されない

答えて

関連する問題