Цвет фона для div, который не отображается после загрузки

Question

Я внес некоторые изменения в код, добавив новый div для определенного блока текста. При просмотре файла HTML в Chrome он отображается идеально. Но как только я загрузил его в свой веб-хостинг, я обнаружил, что он отображается без цвета фона для этого div (и только для этого div). Однако, похоже, правильно отображается с помощью Chrome на моем телефоне. В настоящее время у меня есть и сам веб-сайт, и файл HTML, открытый рядом, и я не могу понять, как это произошло.

CSS, если div не работает:

#indexbar {
    background-color: rgba(176,224,230, 80%);
    border-radius: 25px;
    position: fixed;
    bottom: 0;
    width: 90%;
    margin: 0 5% 0 5%;
}

CSS для работы с div:

#main {
    padding: 0em 1em 0em 1em;
    background-color: rgba(176,224,230, 80%);
    border-radius: 25px;
    margin: 0 5em 0 5em;
}

Редактировать: добавлено HTML для неработающего кода

<div id="indexbar">
<h4><a href="portfolio.html">PORTFOLIO</a> | <a href="resume.html">RESUME</a> | <a href="about.html">ABOUT</a></h4>
</div>

Answer 1

Это работает здесь! измените положение на относительное вместо фиксированного

#indexbar {
    background-color: rgba(176,224,230, 80%);
    border-radius: 25px;
    position: relative;
    bottom: 0;
    width: 90%;
    margin: 0 5% 0 5%;
}

https://jsfiddle.net/chandirasekaranid/5Ldfm8qu/

. Пожалуйста, очистите кэш файлов и попробуйте !!

Answer 2

вы просто предоставляете height на div или добавляете текстовое содержимое, тогда оно будет работать. по умолчанию элемент div принимает 0px height. проверьте обновленный фрагмент ниже ..

#indexbar {
    background-color: rgba(176,224,230, 80%);
    border-radius: 25px;
    position: fixed;
    bottom: 0;
    width: 90%;
    margin: 0 5% 0 5%;
    height: 10%;
}

<div id="indexbar">
<h4><a href="portfolio.html">PORTFOLIO</a> | <a href="resume.html">RESUME</a> | <a href="about.html">ABOUT</a></h4>
</div>

Answer 3

Вы уверены, что ваш CSS правильно связан с вашим HTML ?? В противном случае попробуйте заменить 80% на 0,8

.

Answer 4

Просто попробуйте background-color: rgba(176,224,230, 80%) !important; иногда это может происходить, когда другие стили перезаписывают цвет фона.