极客观点
项目管理
HarmonyOS
https://jsfiddle.net/6p30m3of/2/ 类似于这种情况
CSS父元素有横向滚动条，子元素中的按钮弹出内容比父元素内容高，如何使按钮的弹出内容不会把父元素撑高，并且可以显示出来，下面是相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div style="width: 500px;height: 100px;border: 1px solid #000000;overflow:auto;">
<table style="width: 800px!important;" class="table" width="">
<tr ><td >1</td><td width="100">1</td><td width="100" >1</td><td width="100"> 1</td><td><td width="100">1</td><td width="100">1</td><td width="100">1</td><td width="100" >1</td><td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div></td></tr>
</table>
</div>
</body>
</html>
使用了
overflow只要不是默认的visible会把子元素的内容给控制住的。我想的解决方案是：最外层的
div在来个包裹，然后<ul>根据这个div定位，然后还需要js配合动态判断left、top。想想都疯了。