为什么我的容器div不会扩展以显示内容?

时间:2013-10-30 08:58:49

标签: css-float css

我有一个容器div,其中包含一个滑出式菜单。这意味着我想要overflow-x:hidden以便在“折叠”时看不到菜单。

但是,我希望高度扩展以适应内容。目前它只是添加滚动条。

http://jsfiddle.net/bdgriffiths/ySQgm/8/

我怀疑问题可能与孩子“菜单”元素上的花车有关。

容器DIV的CSS是:

.container {
   font-family:Arial; Verdana; Sans-serif;
   background: #efefef;
   border: 1px solid #bbb;
   border-bottom: 6px solid magenta;
   width: 340px;
   height:auto!important;
   overflow-x:hidden;
   overflow-y:auto;
   position:relative;
}

然后菜单由以下内容组成:

.slideout {
   background: magenta;
   position: relative;
   width: 300px;
   height: 40px;
   top: 0px;
   right:-320px;
   z-index:2;
}

.clickme {
    float: left;
    height: 40px;
    width: 20px;
    background: magenta;
}
.slidebutton {
    color:#fff;
    height:40px;
    width:30%;
    text-align:center;
    background-color: magenta;
    float:left; 
}

1 个答案:

答案 0 :(得分:2)

JSFIDDLE

我更新了你的小提琴。

.content {
  z-index:1;
  /* position: absolute; */
  padding:12px;
  font-size: 0.8em;
}

问题是.content课程中设定的绝对位置。只需删除它,父容器就会随着.content高度的增长而展开。

为了让非画布菜单与您的内容重叠,您需要为.slideout课程设置绝对位置。

Updated Fiddle

.slideout {
  position: absolute;
  right:-290px;
  ...
}