1

Нужно, чтобы блок с зеленой обводкой был по всей ширине страницы (нужно чтобы именно цвет фона был по всей ширине), а сам контент был в соответствии с шириной контейнера). Сложность в том, что должна сохраниться вложенность данного блока, т.к в дальнейшем будет адаптивность

.container {
  width: 960px;
  margin: 0 auto;
}

.navbar {
  background: #ccc;
}

.navbar-inner {
  height: 60px;
}

.menu {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: flex;
  list-style: none;
  border: 3px dashed red;
}

.menu__item {
  display: flex;
  width: calc(100%/8);
  text-align: center;
}
.menu__item:hover {
  background: #7f8fa6;
}

.menu__link {
  position: relative;
  display: inline-flex;
  justify-content: center;
  flex: 1;
  padding: 20px;
}

.submenu {
  position: absolute;
  top: 58px;
  right: 0;
  left: 0;
  background: #95afc0;
  border: 3px dashed green;
}

.submenu-content {
  margin: auto;
}
<div class="container">
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Журчит несколько свой, дорогу взгляд осталось на берегу встретил текста повстречался текстов! За, силуэт сбить? Толку, жаренные рыбными. Имеет, но жизни?</p>
</div>
<nav class="navbar">
  <div class="navbar-inner">
    <ul class="menu">
      <li class="menu__item"><a class="menu__link" href="#">item V</a>
        <div class="submenu">
          <div class="submenu-content">
            <p>Это Подменю</p>
            <p>с Шириной как у контейнера</p>
          </div>
        </div>
      </li>
      <li class="menu__item"><a class="menu__link" href="#">item</a></li>
      <li class="menu__item"><a class="menu__link" href="#">item        </a></li>
    </ul>
  </div>
</nav>

8
  • Пробовал сделать со 100% width, но как подобрать padding чтобы было как в контейнере и адаптивно?
    – stiv
    18 окт 2018 в 7:55
  • я не увидел обнуление дефолтных стилей - где они ? 18 окт 2018 в 7:58
  • вот Вы к примеру нормалайзе когда подключили ваш серый фон стал на 100% экрана 18 окт 2018 в 8:05
  • так и нужно. Осталось сделать по всей ширине блок с зеленой обводкой, но оставить контент по ширине контейнера
    – stiv
    18 окт 2018 в 8:08
  • Не совсем, к сожалению. Может так будет немного понятнее: prntscr.com/l7fgqq
    – stiv
    18 окт 2018 в 8:17

1 ответ 1

0

.container {
  width: 960px;
  margin: 0 auto;
}

.navbar {
  background: #ccc;
}

.navbar-inner {
  height: 60px;
}

.menu {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: flex;
  list-style: none;
  border: 3px dashed red;
}

.menu__item {
  display: flex;
  width: calc(100%/8);
  text-align: center;
}
.menu__item:hover {
  background: #7f8fa6;
}

.menu__link {
  position: relative;
  display: inline-flex;
  justify-content: center;
  flex: 1;
  padding: 20px;
}

.submenu {
  position: absolute;
  top: 58px;
  right: 0;
  left: 0;
  border: 3px dashed green;
}

.submenu:before {
  content: '';
  position: absolute;
  display: block;
  width: 100vw;
  height: 100%;
  left: 50%;
  right: 50%;
  background: #95afc0;
  transform: translateX(-50%);
  z-index: -1;
}

.submenu-content {
  margin: auto;
}
<div class="container">
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Журчит несколько свой, дорогу взгляд осталось на берегу встретил текста повстречался текстов! За, силуэт сбить? Толку, жаренные рыбными. Имеет, но жизни?</p>
</div>
<nav class="navbar">
  <div class="navbar-inner">
    <ul class="menu">
      <li class="menu__item"><a class="menu__link" href="#">item V</a>
        <div class="submenu">
          <div class="submenu-content">
            <p>Это Подменю</p>
            <p>с Шириной как у контейнера</p>
          </div>
        </div>
      </li>
      <li class="menu__item"><a class="menu__link" href="#">item</a></li>
      <li class="menu__item"><a class="menu__link" href="#">item</a></li>
    </ul>
  </div>
</nav>

Можно использовать :before

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.