Css цветной блок не работает, если пустой

Я пытаюсь использовать CSS, чтобы сделать заголовок состоит из 2 дивCss цветной блок не работает, если пустой

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      #header-top { 
       width: 100%; 
       height: 15%; 
       background-color: #4d6186; 
      } 
      #header-bottom { 
       padding-left: 20%; 
       width: 100%; 
       height: 5%; 
       background-color: #606060; 
       box-shadow: 0px 10px 5px #888888; 
      } 
      #logo { 
       position: absolute; 
       height: 25%; 
      } 
      #faro { 
       position: absolute; 
       top: 2%; 
       right: 5%; 
       height: 20% 
      } 
      #content { 

      } 
     </style> 
    </head> 

    <body> 
     <img id="logo" src="img/taberna-pirata.png" alt="La taberna pirata"> 
     <img id="faro" src="img/faro.png"> 
     <div id="header-top"> </div> 
     <div id="header-bottom"> 
      <!--<h1>Welcome to the bay</h1>--> 
     </div> 

     <div id="content"> 

     </div> 
    </body> 
</html>

Но цветные дивов работать только тогда, когда есть что-то внутри дел. Если они пусты, они не отображаются.

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

источник

2015-03-10 Roman Rdgz

В этой ситуации вы не можете использовать значения% в height. Попробуйте использовать px.

Другое решение установить HTML и тело height следующим образом:

html, body{ 
    height: 100%; 
}

источник

2015-03-10 22:33:41 marcelo2605

Я предположил, что это может быть причиной, но разве разве что не должно быть плохой практикой? Как я могу достичь этого и все еще иметь возможность правильно его видеть на мобильных устройствах? Используя em? разные aproach и придерживаться процентов? –

Настройка html и высоты тела не работает, если я поддерживаю высоту div в% –

Вы можете добиться этого легко, давая ему absolute положение: JS Fiddle

#header-top { 
    position: absolute; 
    width: 100%; 
    height: 15%; 
    background-color: #4d6186; 
}

Однако, я не уверен, причина наличия пустого div с процентной высотой.

источник

2015-03-10 22:37:36

Вам нужно будет установить элемент контейнера на высоту. В противном случае вы просите браузер установить высоту до 100% от неизвестного значения, и это не сработает. В вашем случае контейнер будет body и html.

Или вы можете добавить   в качестве заполнителя, а не пустым. Опять же, что % не будет работать.

<div id="header-bottom"> 
    &nbsp; 
</div>

источник

2015-03-11 00:28:57 Stickers

Css цветной блок не работает, если пустой

ответ

Смежные вопросы