Question

我正在尝试制作动态HTML元素，这些元素将通过jQuery调整大小。这是我使用的程序：

HTML：

<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>

CSS：

html,
body {
    margin:0;
    padding:0;
    height:100%;
    background-color: #f5f7fa;
}

#top, #bottom, #left, #right {
    position: absolute;
}

#top {
    background-color: red;
}

#bottom {
    background-color: blue;
}

#left {
    background-color: orange;
}

#right {
    background-color: green;
}

JAVASCRIPT - jQuery

$(function() {

    function ResizeObjects() {
        var margin = 10; // margin for LEFT and RIGHT panel

        var window = $(this);
        var body = $("body");
        var top = $("#top");
        var bottom = $("#bottom");
        var left = $("#left");
        var right = $("#right");

        // top panel
        top.css("top", 0);
        top.width(body.width());

        // bottom panel
        bottom.css("top", body.height()-bottom.height());
        bottom.width(body.width());

        // left panel
        left.css("top", top.height()+margin);
        left.css("left", margin);
        left.width( (body.width()/2)-(margin*1.5) );
        left.height( body.height()-top.height()-bottom.height()-(2*margin) );

        // right panel
        right.css("top", top.height()+margin);
        right.css("right", margin);
        right.width( (body.width()/2)-(margin*1.5) );
        right.height( body.height()-top.height()-bottom.height()-(2*margin) );
    }

    $(window).on("resize", function() {
        ResizeObjects();
    });

    ResizeObjects();

});

它似乎在某种程度上有效，但如果您在其他设备上尝试使用Safari浏览器的平板电脑，或者您可以尝试在Chrome中调整它，则会看到错误的调整大小操作，尤其是BOTTOM面板。

这个例子是基于BODY是VIEWPORT的想法（我相信这是任何浏览器中整个可见空间的名称）。也许这个想法是错误的。

可以在此处找到整个示例：https://jsfiddle.net/Lyu1naqp/1/

具有动态调整大小的HTML模板

0 个答案: