Div виден только с чем-то в нем

В настоящее время я работаю над проектом и столкнулся с проблемой. В настоящее время у меня есть «внешний», «средний» и «внутренний» div, поэтому я могу разместить свой контент точно посередине. Но когда я помещаю div внутри «внутреннего» div, «внутренний» div виден, но не тот, что внутри (если он не содержит что-то вроде буквы).

Вот пример:

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    position: relative;
    margin-left: auto;
    margin-right: auto; 
    width: 100px;
    height: 100px;
    background: red;
}

.invisiblediv {
    height 30px;
    width: 30px;
    left: 0px;
    bottom: 10px;
    background: blue;
    position: absolute;
}
<!DOCTYPE html>

    <html> 
        
        <head>
            <link rel="stylesheet" type="text/css" href="example.css">
        </head>
        
        <body>
          
            <div class="outer">
            <div class="middle">
            <div class="inner">
              
                <div class="invisiblediv"></div>
            
            </div>
            </div>
            </div>
            
        </body>
        
    </html>


html css invisible
person ItsNotAbyss    schedule 02.06.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Потому что у вас есть ошибка в вашем CSS. В invisiblediv CSS после атрибута height отсутствует двоеточие. Таким образом, div отображается с высотой 0.

person Rahul Nanwani    schedule 02.06.2015
comment
это не точка с запятой, это двоеточие - person Karthi Keyan; 02.06.2015

arrow_upward
1
arrow_downward

Добавить двоеточие после высоты

 .invisiblediv {
    height : 30px;
    width: 30px;
    left: 0px;
    bottom: 10px;
    background: blue;
    position: absolute;
}

http://output.jsbin.com/pinimocino/2/

person Prime    schedule 02.06.2015