Question

我正在JavaScript中构建一个可扩展的窗口控件，并打算使用两个框，如下所示：

<div id="outer">
    <div id="inner">
        content goes here...
    </div>
</div>

CSS的内容如下：

#outer {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 200px;
    width: 200px;
}
#inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 10px solid red;
}

这个想法是内盒的偏移高度和宽度永远不会大于200px，即使它有一个边框（如CSS所示）。

这适用于所有主流浏览器，但不适用于IE6。原因是它不支持组合top：0，bottom：0，left：0和right：0来填充父容器。

在Quirks模式中，因为盒子模型是皇家拧紧的，你可以将高度和宽度设置为100％并完成，但是，我在标准模式下工作。

是否有纯CSS解决方案？如果没有，你能否就JavaScript解决方案提出建议，该解决方案不涉及测量偏移值，设置高度/宽度然后减去差异？

提前致谢！

Answer 1

这是针对您的问题的jQuery解决方案。

$(document).ready(function() {
    border_left = parseInt($("#inner").css("borderLeftWidth"), 10);
    border_right = parseInt($("#inner").css("borderRightWidth"), 10);
    border_top = parseInt($("#inner").css("borderTopWidth"), 10);
    border_bottom = parseInt($("#inner").css("borderBottomWidth"), 10);

    width = $("#outer").width() - (border_left + border_right);
    height = $("#outer").width() - (border_top + border_bottom);

    $("#inner").width(width);
    $("#inner").height(height);
});

干杯...

IE6 Strict Mode＆amp;上：0，下：0

1 个答案: