HTML-вложенный div не отображается

Question

Я создал div. Запись CSS, как показано ниже:

.displaybox 
{  
    height:200px; 
    width:200px; 
    border: 1px solid; 
    background:#F0F0F0; 
    font-family:arial,sans-serif; 
    position:absolute; 
    overflow:auto; 
    padding:5px; 
} 

Затем я использую следующий HTML для его отображения:

<div class="displaybox" id="RawScanDisplay" style="display:none;"></div> 

До сих пор это работает отлично.

Теперь я хочу, чтобы внутри отображался внутренний диск, который предназначен исключительно для отображения.

Я создал простой div, который я могу манипулировать позже, чтобы отображать, как я хочу. ДИВ выглядит следующим образом:

<div style="background:#AABCC1; height:20px; width:20px;"></div> 

Этот Див отображает мелкие по себе, но когда я пытаюсь гнездо его в пределах предполагаемого родительского DIV, он не отображается, как показано ниже:

<div class="displaybox" id="RawScanDisplay" style="display:none;"><div style="background:#AABCC1; height:20px; width:20px;"></div></div> 

I хотите родительский DIV быть скрыты до тех пор, пока пользователь не выполняет определенное действие, на котором я хочу, чтобы отобразить ниже является JavaScript:

 function fnRawScanDataResponse(e) 
     {    
      var oBox = document.getElementById("RawScanDisplay"); 
      oBox.style.display = ""; 

     } 

Что я делаю неправильно?

Answer 1

Когда вы применяете стили display:none к контейнеру, каждый элемент этого контейнера также исчезает.

Вы можете использовать visibility: hidden вместо того, чтобы получить эффект, которого контейнер до сих пор занимает пространство окна, но содержание исчезает и в этом случае