Как мне показать div без текстового содержимого?

Question

Я довольно новичок в CSS и пытаюсь достичь ширины полосы на всю страницу. Таким образом, я создал класс для обработки полной ширины страницы и хочу создавать отдельные классы для баров разных цветов. Однако браузер не отображает панель. Я попытался применить postion:relative к основному полноразмерному div и position:absolute к выходу bar без эффекта. Как я могу решить эту проблему? Я заметил, что могу пробить линии CSS в один div, чтобы дать мне желаемый эффект. Тем не менее, я хотел разделить две функции на два разных класса, просто для того, чтобы попытаться написать чистый код.

.fullwidth{ 
     position: absolute; 
     width: 100%; 
     height: 80px; 
     left: 0; 
     right: 0; 
    } 

.bar-1{ 
     background-color: lightblue; 
} 

<div class = "fullwidth"> 
    <div class = "bar-1"></div> 
</div> 

Answer 1

Вы можете использовать min-height:

.fullwidth{ 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 80px; 
 
     left: 0; 
 
     right: 0; 
 
    } 
 

 
.bar-1{ 
 
     background-color: lightblue; 
 
     min-height: 16px; 
 
}

<div class = "fullwidth"> 
 
    <div class = "bar-1"></div> 
 
</div>

Обратите внимание, что min-height и font-size атрибуты совместимы.

Answer 2

Ваш .bar-1, кажется, не имеют ширину или высоту

.bar-1{ 
    background:lightblue; 
    overflow:hidden; 
    height:100%; 
    width:100%; 
} 

Fiddle: http://jsfiddle.net/1ccp3qpb/

Answer 3

U может получить полосу, добавив некоторую высоту вашего бара ... еще это будет как 0 пикселей, и тогда вы не сможете его увидеть.

.bar-1 
{ 
    background-color: lightblue; 
    height:20px; 
}