Такая проблема появилась при создании мобильного меню. Дочерний элемент 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>