面板高度最初是使用内联样式指定的。 所有面板的内容高度都应允许调整为从 0 开始的任何值
我尝试使用下面的代码
.panel-resizable {
resize: vertical;
overflow: auto
}
但它不允许调整面板标题的大小，以免超过初始高度。
如何允许将所有面板调整为任意大小？
一些 jquery，jquery ui 其他插件可以代替 bootstrap 如果它解决了问题。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.panel-resizable {
resize: vertical;
overflow: auto
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body panel-resizable" style="height:180px">
</div>
<div class="panel-footer">Band1</div>
</div>
<div class="panel panel-default">
<div class="panel-body panel-resizable" style="height:280px">
</div>
<div class="panel-footer">Band2</div>
</div>
</body>
</html>最佳答案
出于某种原因(不确定原因，仍在调查中)，您可以否决浏览器调整大小 min-height (==当前 style.height 值)对于可调整大小 < em>如果你添加一个像这样的伪类:
.panel-resizable:active {
height: 1px;
}
和 删除硬编码的内联 style="height:180px;" - 初始高度仍然可以由 CSS 设置:
.panel-resizable {
resize: vertical;
overflow: auto;
background-color:#f00;
height: 180px;
}
评论中的 fiddle 已更新 -> https://jsfiddle.net/x0gyyp3s/2/
关于jquery - 如何允许将面板内容高度调整为 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34601106/