在浏览器中缩小时窗格不会改变大小答案

【问题标题】：Panes do not change size when Zoom Out in browser在浏览器中缩小时窗格不会改变大小
【发布时间】：2015-09-18 18:03:03
【问题描述】：

我不知道我的 HTML 有什么问题，所以 jquery-ui-layout 库在浏览器（Chrome/Firefox）中缩小时不想重新计算容器的宽度/高度。在我的 HTML 中，所有白色窗格都相互连接，但是当我缩小时，它们会断开连接......

我查看了官方的jquery-ui-layout 演示，例如这个：http://layout.jquery-dev.com/demos/example.html 正如您在 Zoom Out 元素（它们的内联 style 属性）中看到的那样，它们会动态更改它们的值。但在我的代码中 - 它不会发生 - 值保持不变......

当在浏览器中缩小几次时，部分在我的代码中的外观如下：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js"></script>

    <style>
        body { background-color: green; }
        .xxx { height: 100vh; }
        .left { background-color: red; }
        .right { background-color: green; }
        .visible-overflow { overflow: visible !important; }
    </style>
</head>

<body>

<div class="layout-container visible-overflow">

    <div class="xxx ui-layout-center inner-layout left">
        <div class="ui-layout-center auto-overflow"></div>
        <div class="ui-layout-east"></div>
    </div>

    <div class="ui-layout-east pane-selector right-side-board-panel right"></div>
</div>

<script>
    var element = $('.layout-container');
    element.layout({ applyDefaultStyles: true });
    element.find('.inner-layout').layout({ applyDefaultStyles: true });
</script>

http://plnkr.co/edit/DhQyktteFfyd5hrKxJQX?p=preview

（要查看问题，请在 plunker 中选择 在单独的窗口中启动预览，然后在浏览器中缩小几次）

【问题讨论】：

标签： jquery jquery-ui-layout

【解决方案1】：

您的方法正确率为 99.99%。你只是错过了把height 给你的layout-container 就像xxx 一样

我只是修改了以下一行：

.layout-container,.xxx { height: 100vh; }

其余代码都很完美。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js"></script>

    <style>
        body { background-color: green; }
        .layout-container,.xxx { height: 100vh; }
        .left { background-color: red; }
        .right { background-color: green; }
        .visible-overflow { overflow: visible !important; }
    </style>
</head>

<body>

<div class="layout-container visible-overflow">

    <div class="xxx ui-layout-center inner-layout left">
        <div class="ui-layout-center auto-overflow"></div>
        <div class="ui-layout-east"></div>
    </div>

    <div class="ui-layout-east pane-selector right-side-board-panel right"></div>
</div>

<script>
    var element = $('.layout-container');
    element.layout({ applyDefaultStyles: true });
    element.find('.inner-layout').layout({ applyDefaultStyles: true });
</script>

【讨论】：

你是个天才，先生！ :) 我与这个问题斗争了 2 周 %) 我会在 15 小时内奖励你（StackOverflow 阻止我早点这样做）
谢谢亚鲁。请不要叫我先生...:)！很高兴知道它对您有所帮助。