如何允许将面板内容高度调整为 0答案

【问题标题】：How to allow to resize panel content height to 0如何允许将面板内容高度调整为 0
【发布时间】：2016-01-04 22:35:16
【问题描述】：

面板高度最初是使用内联样式指定的。所有面板内容高度应允许调整为从 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>

【问题讨论】：

我无法重现该问题，我创建了一个 JSFiddle，它运行良好，我可以将其调整到至少 1px 的高度。 jsfiddle.net/x0gyyp3s/1
我试过你在桌面 chrome 中摆弄。它不允许降低高度。它只允许增加高度。在 Internet Explorer 中它不允许任何调整大小，不会出现调整大小图标。
caniuse.com/#feat=css-resize IE 不支持 resize 属性。
任何时候设置height，浏览器都会在调整大小时使用新的高度作为最小高度。因此，我认为如果没有某种 hack（那里有很多），这个问题是无法解决的，我们无法确定将来是否真的可以在不同的浏览器上工作。
@SeanWessell，不 - 但我认为我们最终可以将 IE 视为“已弃用”:)

标签： jquery html css jquery-ui twitter-bootstrap-3

【解决方案1】：

由于某种原因（不知道为什么，仍在调查），您可以否决浏览器调整大小 min-height（== 当前 style.height 值）为可调整大小的如果您添加这样的伪类：

.panel-resizable:active {
    height: 1px;
}

和删除硬编码的内联style="height:180px;" - 初始高度仍然可以由 CSS 设置：

.panel-resizable {
   resize: vertical;
   overflow: auto;
   background-color:#f00;
   height: 180px;
}

来自 cmets 的小提琴已更新 -> https://jsfiddle.net/x0gyyp3s/2/

【讨论】：

点击面板内部内容将面板高度更改为 1px。如何解决此问题以使面板保持其高度？
我在stackoverflow.com/questions/34644134/… 中发布了相关问题，我切换到 jquery-ui resizable 因为零高度调整大小在其他方面看起来是不可能的。