文章/答案/技术大牛

发布

社区首页 >问答首页 >在浏览器中缩放时，窗格不会更改大小

问在浏览器中缩放时，窗格不会更改大小
EN

Stack Overflow用户

提问于 2015-09-18 18:03:03

回答 1查看 376关注 0票数 3

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

我查看了正式的jquery-ui-layout演示，例如，这个示例：http://layout.jquery-dev.com/demos/example.html，正如您在Zoom元素上看到的那样(它们的内联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

(若要查看问题，请选择在柱塞中的单独窗口中启动预览，然后在浏览器中放大几次)

jquery

jquery-ui-layout

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-21 13:21:40

你的方法是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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32658363

复制

相似问题

问在浏览器中缩放时，窗格不会更改大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在浏览器中缩放时，窗格不会更改大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在浏览器中缩放时，窗格不会更改大小
EN