2016-06-23 131 views
-1

在下面的代码中,我试图增加位于其父分区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>

+3

因为您将max-height设置为50px – j08691

+0

您是指父div或子div的最大高度? –

+0

@pure_coder'dropdown' div的最大高度。 – Dev1997

回答

0

它继承了其.content-smallmax-height属性。同样,.content-small只能有.content div的最大尺寸。

+0

那么我怎么能让孩子的身高比父母高呢?我也不想删除最大高度。什么是替代 –

+0

因为无论如何你都使用绝对定位,所以你不能在.content-small里嵌套.dropdown div。继承无法关闭。 – user3723332