javascript - How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div? - Stack

admin管理员组

文章数量:1352138

First of all an example: /

The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.

Example Code:

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

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

<script src=".3.1/jquery.min.js"></script>

<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>

First of all an example: https://jsfiddle/85uqehz5/

The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.

Example Code:

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

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

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

• javascript
• html
• css
• overflow

Share Improve this question Follow edited Oct 18, 2019 at 13:01 Jeremy Thille 26.4k1212 gold badges4747 silver badges6464 bronze badges asked Mar 10, 2016 at 8:10 user2718671user2718671 2,9761212 gold badges5353 silver badges8989 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It's very simple, in your specific case:

1- Remove overflow: auto; from #wrap

2- Add this to your CSS:

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

This makes the height of #wrap's calculation include the floated element.

If you have multiple uses declare a class like clearfix and use it whenever needed.

Demo: https://jsfiddle/85uqehz5/1/

Floats must be cleared: https://jsfiddle/85uqehz5/3/

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

The reason the menu is cut off is because you haven't clear your float: left and that is done with such piece of code to the container

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

本文标签：