Как сделать дочерний объект на 100% страницы, если родитель 90%?

Question

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

Привет. Код вот такой:

<div class="wrapper">
<div class="content">
  <div class="topNav">
    <ul>
      <li><a href="">Чтото</a></li>
      <li><a href="">Чтото</a></li>
      <li><a href="">Чтото</a></li>
      <li><a href="">Чтото</a></li>
      <li><a href="">Чтото</a></li>
      <li><a href="">Чтото</a></li>
      <li><a href="" class="redColor">Чтото%</a></li>
    </ul>
  </div>
<div class="sideBar">
  <p>Категории:</p>
  <div class="sideNav">
    <ul>
      <li>
        <ul>
          <li><a href="#0">Вариант</a></li>
          <li><a href="#0">Вариант</a></li>
          <li><a href="#0">Вариант</a></li>
        </ul>
      </li>
      <li><a href="#0">Вариант 2</a></li>
      <li><a href="#0">Вариант 2</a></li>
    </ul>
  </div>
</div>
</div>
</div>
</body>

.wrapper {
  position         : absolute;
  top              : 0;
  right            : 0;
  bottom           : 0;
  left             : 0;
  width            : 90%;
  margin           : auto;
  background-color : #FFFFFF;
}
.topNav {
  position : relative;
  height   : 50px;
  width: 100%;
  background-color: #e85252;
}

Вот. Как сделать что бы topNav был в ширину на всю страницу? Учитывая, что обложка(родитель) занимает 90%. Это вообще возможно?

Comments

[Griboks]

position:absolute???????????????????

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

Griboks, fixed нужно?

[id_baton4eg]

нельзя, максимум как вылезти - позиционировать с помощью margin

Answer 1

[Максим]

https://codepen.io/MaximLensky/pen/GOEdWw?editors=1100 так ?

Comments

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

Да. Спасибо.

Answer 2

[HelpSophie]

weight: 100%; нет такого свойства

либо 100vw либо смените position либо задайте отрицательный margin

p.s. очень хорошо подумайте нужен ли absolute для wrapper. Выглядит очень подозрительно.

Comments

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

Да, протупил. width: 100, но ничего это не меняет

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

А 100vw заполняет только справа до конца, а слева остаются те самые 10% незаполненными.

[HelpSophie]

Игорь Варнавский, свойство margin отвечает за отступы, в том числе и отрицательные

[HelpSophie]

Игорь Варнавский,
держите https://jsfiddle.net/6tgejaz2/

Answer 3

[Ростислав Сергеевич]

.wrapper {
  width: 90%;

  margin: 0 auto;
  background-color: #fff;
  padding-top: 50px;
}

.topNav {
  height : 50px;
  width: 100vw;

  position: absolute;
  left: 0;
  top: 0;
  background-color: #e85252;
}

После этого ul всё равно не даст .topNav встать в верхнюю точку, поэтому поработайте ещё с ним:

ul {
  padding: 0;
  margin: 0;
}

Comments

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

Тоже самое, только теперь и категории съехали вверх.