在下面的代码中,我试图增加位于其父分区content-small
(绿色的一个)下方的.dropdown
(灰色的一个)的高度。我注意到当我试图增加高度超过50px时,没有任何反应。我不知道为什么。在这里,我尝试练习下拉菜单。绝对位置div高度不增加
*{
box-sizing:border-box;
}
a {
\t color: rgba(0,0,0,1);
\t text-decoration: none; \t \t
}
a:hover {
\t color: rgba(0,0,255,1); \t
}
html,body {
\t margin: 0px;
\t height: 100%;
\t width: 100%;
\t left: 0px;
\t top: 0px;
\t background-color: rgba(0,0,0,1);
\t padding: 0px;
}
.wrapper {
\t height: 600px;
\t max-width: 960px;
\t margin-left: auto;
\t left: 0px;
\t top: 0px;
\t background-color: rgba(204,204,204,1);
\t margin-right: auto;
\t position: relative;
\t padding: 0px;
\t margin-top: 0px;
}
.content {
\t position: relative;
\t box-sizing: border-box;
\t height: 100%;
\t max-height: 200px;
\t max-width: 600px;
\t background-color: #FFF;
\t margin-right: auto;
\t margin-left: auto;
\t margin-top: 0px;
\t left: 0px;
\t right: 0px;
\t font-size: 32px;
\t text-align: center;
\t border: 3px solid rgba(0,0,0,1);
\t border-radius: 15px 15px 0px 0px;
\t width: 100%;
}
.content-small {
\t max-width: 100px;
\t height: 100%;
\t max-height: 50px;
\t background-color: rgba(0,255,204,1);
\t position: relative;
\t margin-right: auto;
\t margin-left: auto;
\t border: 3px solid rgba(0,0,0,1);
\t top: 5px;
}
.dropdown {
\t box-sizing: border-box;
\t width: 100px;
\t max-width: 100px;
\t height: 100%;
\t max-height: 50px;
\t background-color: rgba(214,214,214,1);
\t position: absolute;
\t margin-right: auto;
\t margin-left: auto;
\t border: 3px solid rgba(255,0,0,1);
\t top: 47px;
\t left: -3px;
}
\t
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">
</div>
</div>
</div>
</div>
因为您将max-height设置为50px – j08691
您是指父div或子div的最大高度? –
@pure_coder'dropdown' div的最大高度。 – Dev1997