Может кто-нибудь помочь мне сделать мой прямоугольник отзывчивым?

Question

Пытается следовать Treehouse, но добавляет некоторые из моих собственных изменений/пытается новые вещи.

.rectangle { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #f02441; 
 
}

<div id="wrapper"> 
 
     <section> 
 
     <ul id="gallery"> 
 
      <li> 
 
      <a> 
 
       <div class="rectangle"></div> 
 
       <p>Lorem ipsum dolor sit amet</p> 
 
      </a> 
 
      </li>

Если я делаю высоту прямоугольника любое значение рх, затем появляется прямоугольник. Если я попытаюсь сделать это на 100% или что-то в этом роде, оно просто исчезнет.

Вот и все. http://codepen.io/defy/pen/QwypNZ

Answer 1

Причина, почему высота не устанавливаются (в демо-версии CodePen), когда вы используете высоту в процентах, потому что его родитель (a элемента) в настоящее время не имеет набор высоты. Если вы установили высоту, указав ее display:block;, а рабочее значение height будет работать.

/* You should use a more specific selector, maybe a class. This is only for example */ 
 
a { 
 
    display:block; /* Necessary so that the height can be set */ 
 
    height:100px; /* Set the height of the parent anchor */ 
 
} 
 

 
.rectangle { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #f02441; 
 
}

<div id="wrapper"> 
 
    <section> 
 
     <ul id="gallery"> 
 
      <li> 
 
      <a> 
 
       <div class="rectangle"></div> 
 
       <p>Lorem ipsum dolor sit amet</p> 
 
      </a> 
 
      </li>

---

Если Вы желаете установить высоту прямоугольника должна основываться на высоте окна просмотра (например, ширина), вы должны либо использовать либо vh (видовой экран высота) - Demo

ИЛИ

сделать высоту родителя быть основан на го e высота просмотра. Если вы не используете vh, это означает, что вы должны были бы html, body { height:100%; } и размером всех других родителей после body, но до самого элемента с относительными высотами, а также - Demo