Подогнать высоту контейнера под дочек css
164
23 июня 2021, 16:40
подскажите, как подогнать высоту контейнера под меню, которое выпадает справа?
$('body').on('click', '.btn-dropdown', function() {
$(this).toggleClass('active');
$('.btn-menu').toggleClass('open');
$('.navigation--catalog').toggleClass('open');
});header .bottom__header .bottom__header--box {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
header .bottom__header .bottom__header--box .btn-dropdown {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
color: #333333;
font-size: 16px;
font-weight: 400;
margin-right: 50px;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
}
header .bottom__header .bottom__header--box .btn-dropdown:hover,
header .bottom__header .bottom__header--box .btn-dropdown.active {
cursor: pointer;
color: #FF4764;
}
.navigation--catalog {
position: absolute;
top: 164px;
left: 0;
right: 0;
padding: 28px 0;
z-index: 3;
background-color: #ccc;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(30px) translateX(0);
transform: translateY(30px) translateX(0);
-webkit-transition: 0.3s all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: 0.3s all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.navigation--catalog.open {
-webkit-transform: translateY(0) translateX(0);
transform: translateY(0) translateX(0);
visibility: visible;
opacity: 1;
}
.navigation--catalog .container-fluid {
position: relative;
}
.navigation--catalog .parent_nav {
width: 300px;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
border-right: 1px solid #DCECF4;
}
.navigation--catalog .parent_nav li {
width: 100%;
}
.navigation--catalog .parent_nav li.parent.dropdown {
position: inherit;
}
.navigation--catalog .parent_nav li.parent.open .parent-a a {
color: #FF4764;
}
.navigation--catalog .parent_nav li.parent.open .parent-a .icon-arrow svg {
fill: #FF4764;
stroke: #FF4764;
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.navigation--catalog .parent_nav li.parent:hover .parent-a a {
color: #FF4764;
}
.navigation--catalog .parent_nav li.parent:hover .parent-a .icon-arrow svg {
fill: #FF4764;
stroke: #FF4764;
}
.navigation--catalog .parent_nav li .parent-a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 10px;
}
.navigation--catalog .parent_nav li .parent-a .icon-arrow svg {
width: 15px;
height: 15px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.navigation--catalog .parent_nav li a {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-decoration: none;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
font-size: 16px;
margin-bottom: 15px;
}
.navigation--catalog .parent_nav li .sub {
padding: 0 0 0 20px;
margin: 0;
list-style-type: none;
position: absolute;
left: 436px;
top: 0;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.navigation--catalog .parent_nav li .sub.dropdown {
position: inherit;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Последняя компиляция и сжатый CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Дополнение к теме -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Последняя компиляция и сжатый JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<header>
<div class="bottom__header">
<div class="bottom__header--box">
<div class="btn-category">
<div class="btn-dropdown">
<div class="btn-menu">
<span class="_line __1"></span>
<span class="_line __2"></span>
</div>
Все категории
</div>
</div>
</div>
</div>
<div class="navigation--catalog">
<div class="container-fluid p-136">
<ul class="parent_nav">
<li class="parent dropdown">
<div class="parent-a" data-toggle="dropdown">
<a href="#">Для женщин</a>
<div class="icon-arrow"><svg><use xlink:href="#carret"></use></svg></div>
</div>
<ul class="dropdown-menu sub">
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_410">Аксессуары</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_417">Боди, торсеты и грации</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_403">Бюстгальтеры</a></li>
<li><a href="http://extremje.bget.ru/dlya-zhenschin/domashnyaya-odezhda">Домашняя одежда</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_397">Жакеты женские оптом</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_406">Женские трусы</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_416">Купальники</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_384">Майки и футболки</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_388">Ночные сорочки</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_390">Пижамы</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_389">Пляжная одежда</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_404">Трусы утягивающие</a></li>
<li><a href="http://extremje.bget.ru/dlya-zhenschin/fitnes">Фитнес</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_387">Халаты для дома</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_398">Эротическое нижнее белье</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=421_394">Юбки женские</a></li>
</ul>
</li>
<li class="parent dropdown">
<div class="parent-a" data-toggle="dropdown">
<a href="#">Для мужчин</a>
<div class="icon-arrow"><svg><use xlink:href="#carret"></use></svg></div>
</div>
<ul class="dropdown-menu sub">
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=423_402">Мужские брюки и шорты</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=423_400">Мужские костюмы для дома и отдыха</a></li>
<li><a href="http://extremje.bget.ru/index.php?route=product/category&path=423_385">Мужской верхний трикотаж</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>Answer 1
сделал так
let h_parent = $('.navigation--catalog').height();
if (screen.width > '1380') {
$('body').on('click','.navigation--catalog .parent_nav li.parent .parent-a', function(){
let hg = $(this).closest('.navigation--catalog .parent_nav li.parent').find('.sub').height();
$('.navigation--catalog').height(hg);
});
$('body').on('click','.navigation--catalog .parent_nav li.parent.open .parent-a', function(){
$('.navigation--catalog').height(h_parent);
}); }
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47563 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23632 visits
- Как через css изменить цвет png изображения? 10350 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9211 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 26.11.2024 | 02:26