Question

首先是一个例子： query explorer

代码只是一个例子，是我真实代码的简单版本。我发现我不能同时拥有这两个：将wrap-div设置为overflow: visible显示的菜单没有被切断，但是盒子阴影不包含盒子;使用overflow:auto;框阴影正在工作但菜单被切断。我该怎么解决这个问题？固定高度不是一种选择。

示例代码： HTML：

<div id="wrap">
  <div id="content">
   Some Content
  </div>
  <div id="content2">
   Some Content
  </div>
  <div id="menu">
    Open Menu
    <div id="menu-list" class="hidden">
      <div> bla </div>    
      <div> bla </div>
      <div> bla </div>
    </div>
  </div>
</div>

CSS：

#wrap{
  width:80%;
  height: auto;
  overflow: visible;
  box-shadow: 0 0 .2rem rgba(0,0,0,.4);
}

#content{
  width: 200px;
  height: 20px;
  margin: 0 auto;
}

#content2{
 float: left; 
}

.hidden{
  display: none;
}

#menu{
  position: relative;
  height: 20px;
  width: 100px;
  background-color: #ccc;
  float: left;
}

#menu-list{
  position: absolute;
  top: 20px;

}

jQuery的：

$('#menu').click(function(){
    $('#menu-list').toggleClass('hidden');
});

Answer 1

在您的具体情况下，这非常简单：

1-从overflow: auto;

移除#wrap

2-将此添加到您的CSS：

#wrap:after {
  display: table;
  content: "";
  clear: both;
}

这使得#wrap计算的高度包括浮动元素。

如果您有多种用途，请声明类似clearfix的类，并在需要时使用它。

演示： https://jsfiddle.net/85uqehz5/1/

Answer 2

必须清除浮动：https://jsfiddle.net/85uqehz5/3/

<div id="wrap" class="clearfix">

菜单被切断的原因是因为您没有清除float: left并且已经使用此类代码对容器进行了清理

.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

如何防止切断绝对定位元素并仍然保持框阴影拥抱父div？

2 个答案: