下拉 div 不会向下推送内容

Question

我有一个来自标题div的下拉列表，它必须向下推送内容(例如，当您单击This is Icon时，它显示蓝色下拉列表，必须向下推h1标签(。

问题是两个类(header-bar__top, header-bar(的高度，我不能改变，我需要它们的高度相同。有办法做到这一点吗？

我只能操作这些类：.header-bar-mobile-drop-down__container, .header-bar-mobile-drop-down__item, .header-bar-mobile-drop-down__icon-button

.header-bar-mobile-drop-down__container {
color: #fff;
display: block;
font-size: 16px;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
display: none;
align-items: center;
text-align: center;
}
.header-bar-mobile-drop-down__icon-button {
color: #fff;
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.header-bar-mobile-drop-down__icon-button:focus+.header-bar-mobile-drop-down__item {
display: block;
margin-top: 26px;
height: 68px;
color: black;
background-color: blue;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
background-color: orange;
}
.header-bar__top {
height: 3.5rem;
z-index: 100;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar__container:after {
content: "";
display: table;
clear: both;
}

<div>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down__container">
<button class="header-bar-mobile-drop-down__icon-button" tabindex="1">
This is Icon
</button>
<div class="header-bar-mobile-drop-down__item">
This is my drop down
</div>
</div>
</div>
</div>
</div>
<h1>This need to be pushed down</h1>
<h1>But instead</h1>
<h1>The dropdown is getting overlayed</h1>
</div>

Answer 1

在标题栏和标题栏顶部使用min-height而不是height，否则它将保持相同的高度，并且下拉显示为溢出(这就是为什么下面的内容不会移动(

.header-bar-mobile-drop-down__container {
color: #fff;
display: block;
font-size: 16px;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
display: none;
align-items: center;
text-align: center;
}
.header-bar-mobile-drop-down__icon-button {
color: #fff;
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.header-bar-mobile-drop-down__icon-button:focus+.header-bar-mobile-drop-down__item {
display: block;
margin-top: 26px;
height: 68px;
color: black;
background-color: blue;
}
.header-bar {
min-height: 3.5rem;
box-shadow: none;
background-color: orange;
}
.header-bar__top {
min-height: 3.5rem;
z-index: 100;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar__container:after {
content: "";
display: table;
clear: both;
}

<div>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down__container">
<button class="header-bar-mobile-drop-down__icon-button" tabindex="1">
This is Icon
</button>
<div class="header-bar-mobile-drop-down__item">
This is my drop down
</div>
</div>
</div>
</div>
</div>
<h1>This need to be pushed down</h1>
<h1>But instead</h1>
<h1>The dropdown is getting overlayed</h1>
</div>

如果你不能改变这两个类的高度，那么我会把下拉框移到标题之外，并使用复选框切换：

.header-bar-mobile-drop-down__container {
color: #fff;
display: block;
font-size: 16px;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__icon-button {
color: #fff;
border: none;
background-color: transparent;
font-size: 1.5rem;
cursor: pointer;
}
#dropdown-toggle {
display: none;
}
.header-bar-mobile-drop-down__item {
display: none;
align-items: center;
text-align: center;
height: 68px;
color: black;
background-color: blue;
}
#dropdown-toggle:checked+.header-bar-mobile-drop-down__item {
display: block;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
background-color: orange;
}
.header-bar__top {
height: 3.5rem;
z-index: 100;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar__container:after {
content: "";
display: table;
clear: both;
}

<div>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down__container">
<label for="dropdown-toggle" class="header-bar-mobile-drop-down__icon-button" tabindex="1">
This is Icon
</label>
</div>
</div>
</div>
</div>
<input id="dropdown-toggle" type="checkbox">
<div class="header-bar-mobile-drop-down__item">
This is my drop down
</div>
<h1>This need to be pushed down</h1>
<h1>But instead</h1>
<h1>The dropdown is getting overlayed</h1>
</div>