Question

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

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

更新评论的小提琴 - ＆gt;的 https://jsfiddle.net/x0gyyp3s/2/

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

1 个答案: