为什么我的容器div无法扩展以显示内容？

问题描述

我有一个容器div，其中包含一个滑出菜单。这意味着我要溢出-x：隐藏，以便菜单在折叠时不可见。

I have a container div, which contains a slide-out menu. This means I want overflow-x: hidden so that the menu is not visible when "collapsed".

但是，我希望高度增加以容纳内容。目前，它只是添加滚动条。

However, I want the height to expand to accommodate the content. At the moment it is just adding scrollbars.

我怀疑问题可能与孩子菜单上的浮标有关

I suspect the problem may be to do with the floats on the child "menu" elements.

容器DIV的CSS为：

The CSS for the container DIV is:

.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;
}

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

And then the menu is made up of the following:

.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;
}

推荐答案

我更新了您的小提琴。

I updated your fiddle.

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

问题是您在中设置的绝对位置。内容类。只需将其删除，父容器就会随着 .content 高度的增加而扩展。

The problem is the absolute position set in your .content class. Just remove it and the parent container expand as the .content height grows.

为了让画布上的菜单与您的内容重叠，您需要将 .slideout 类。

In order to let the off-canvas menu overlap your content, you need to set position to absolute for your .slideout class.

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

这篇关于为什么我的容器div无法扩展以显示内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！