Почему wrapper не растягивается на всю высоту?

Question

[Игорь Варнавский]

Привет. Почему wrapper не растягивается на всю страницу? До productsCatalos(бордэр в самом низу), например. https://codepen.io/igorvarn/pen/rYpjaG - wrapper жёлтого цвета.

Answer 1

[zoozag]

.wrapper:after {
  content: "";
  display: table;
  clear: both;
}

Comments

[Игорь Варнавский]

Спасибо. А почему нужно именно так? Как гуглить это?

[Игорь Варнавский]

Просто когда я дальше добавлю такой код:

<div class="goods">
  <div class="product">
   <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div>
  <div class="product">
    <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div><div class="product">
    <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div><div class="product">
    <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div>
  <div class="product">
    <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div>
  <div class="product">
    <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div><div class="product">
    <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div><div class="product">
    <a href="">
      <img src="/img/l.png" alt="">
      <p class="productBrand">что-то</p>
      <p class="productTitle">что-то</p>
      <p class="productClass">что-то</p>
      <p class="price">565 руб.</p>
    </a>
  </div>
</div>

.goods{
  position: relative;
  width         : 76%;
  height: 100px;
  float: right;
  top: 20px;
}

.product{
  width: 220px;
  height: 400px;
  /*border: 1px solid #bbb;*/
  -webkit-box-shadow: 0px 0px 30px -9px rgba(0,0,0,0.84);
  -moz-box-shadow: 0px 0px 30px -9px rgba(0,0,0,0.84);
  box-shadow: 0px 0px 30px -9px rgba(0,0,0,0.84);
  display: inline-block;
  margin: 10px;
}

Дальше он не продолжается.

[zoozag]

Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся.

[Игорь Варнавский]

zoozag, display: inline-block; это плавающий элемент?

[zoozag]

Игорь Варнавский, Добавьте в codepen и посмотрим. А то так ведь тяжело понять что вы и куда добавляете.

[zoozag]

Игорь Варнавский, Это я на первый комментарий ответид

[Игорь Варнавский]

zoozag, Всё ок вроде. wrapper игнорирует инлайн блоки, но если после добавить див с рыбой то растягивается.

[zoozag]

Игорь Варнавский, Игнорирует скорее всего float блок, а не инлайн.
Я про это и писал:

Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся.

[Игорь Варнавский]

zoozag, Ясно

Answer 2

[images88]

Если речь идет о картинке надо писать max-width: 100%.

Comments

[Игорь Варнавский]

Причём тут ширина к высоте?