1

Такая проблема появилась при создании мобильного меню. Дочерний элемент class="b-header_openmenu_dropmenu" не получается растянуть на всю ширину экрана. Xочу указать в процентах, не получится же рассчитать всю ширину в пикселях, ибо у родителя стоит position: relative, а у дочернего - position: absolute. Вроде бы глупость, но не знаю, что делать. Прошу помочь, код (проблемный фрагмент) ниже.

/*LESS*/
@media (min-width: 100px) and (max-width: 340px) {
  html {
    height: 100%;
    background-attachment: fixed;
    background-size: 100% 100%;
  }
  body {
    background: url("../img/main-background.jpg");
  }
  .b-header {
    position: relative;
    width: 100%;
    height: 61px;
    background: @header_color;
    &_openmenu {
      display: flex;
      justify-content: center;
      align-items: center;
      span#menu_list_icon {
        font-size: 40px;
        color: darken(#fff, 14%);
      }
      span#menu_al_icon {
        font-size: 40px;
        color: darken(#fff, 14%);
        display: none;
      }
      position: relative;
      height: 60px;
      width: 60px;
      &_dropmenu {
        width: 50%;
        background: black;
        position: absolute;
        left: 0;
        height: 100%;
      }
    }
    a {
      display: none;
    }
  }
  .b-slider {
    display: none;
  }
  .b-news {
    display: none;
    width: 320px;
    margin: 0 auto;
  }
  .b-footer {
    display: none;
  }
}
<div class="b-header_openmenu" onclick="open_menu();">
  <span class="glyphicon glyphicon-list" id="menu_list_icon"></span>
  <span class="glyphicon glyphicon-align-left" id="menu_al_icon"></span>
  <div class="b-header_openmenu_dropmenu" id="b-header_openmenu_dropmenu"></div>
  <script src="js/script.js" async></script>
</div>

8
  • 100px - 340px __это для какого девайса ?
    – user33274
    Commented 7 июл. 2016 в 14:31
  • Телефоны (ну, ширина же). На своем вроде проверял - всё работает. Commented 7 июл. 2016 в 14:35
  • Но того блока нету конечно. Commented 7 июл. 2016 в 14:35
  • 340px - это ужас , если не ошибаюсь мало кто адаптирует под это размер
    – user33274
    Commented 7 июл. 2016 в 14:38
  • и флекс и позиционирование не совместимы вроде , чем блочная вёрстка не устраивает ?
    – user33274
    Commented 7 июл. 2016 в 14:41

2 ответа 2

1

На всю ширину и высоту экрана width: 100vw & height: 100vh.

1

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  background: url(https://s1.1zoom.ru/big3/753/371608-svetik.jpg);
  background-attachment: fixed;
  background-size: 100% 100%;
}

.openmenu {
  margin: auto;
  position: relative;
  width: 90vw;
  height: 61px;
  background: red;
}

.child {
  position: absolute;
  top: 20px;
  left: -5vw;
  width: 100vw;
  height: 21px;
  background: green;
  margin: auto;
}
<div class="header">
  <div class="openmenu">
    <div class="child">
    </div>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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