html - 使用 html 和 css 粘贴在页面右侧的面板

Question

我需要使用 HTML 和 CSS 做一些事情，而不需要 javascript。

我需要帮助来定义“外部 Div”的 css。它必须一直到页面底部。高度必须为 100% - 90px。标头具有固定的高度。Inner Div 的高度必须是 Outer Div 高度的 60%。

谁能帮我？如果需要，我可以使用 html5 或 css3。

Answer 1

如果所有尺寸都以 % 为单位，那么在没有 JavaScript 的情况下很容易做到这一点，但是由于标题的高度必须为 90 像素，请尝试以下步骤：

1）给Header一个z-index大于Outer-Div的值，例如：

.header{z-index:10;}
.outer-div{z-index:0;}

2) 现在，为Header赋予以下样式：

.header{height:90px;min-height:90px;max-height:90px;}

3）并且， Outer-Div的以下样式：

.outer-div{height:100%;}

4）因为您希望Inner-Div始终可见，首先您必须将其从Header中取出，因为Header高于Outer-Div，所以：z-index

.inner-div{margin-top:90px;}

5）然后给它一个合适的高度，我建议在这个Inner-Div使用像素内部的 % ：

.inner-div{height:50%;}

Answer 2

要使 Outer Div 的高度为 100%-90px，请使用：

#outerdiv {
    height: 100%;
    margin-bottom: 90px;
}

要使 Inner Div 的高度为 60%，请使用：

#innerdiv {
    height: 60%;
}

两者都是您正常样式的补充。将#outerdiv 和#innerdiv 替换为您的外层和下层div 的ID 或类。

如果您想让面板在用户滚动时沿页面向下移动，请在 SO 上使用此方法。这是简单的 CSS。只需添加position: fixed到 Outer Div 的 CSS。

希望这可以帮助！

Answer 3

在 javascript 中，您应该捕获 body resize 事件，在这种情况下，您必须计算 Outer DIV 的高度。以下代码对您来说是一个好的开始：

function onBodyResize(e) {
    setProperty("OuterDIV", "height", (getDocHeight() - parseInt(getProperty("HeaderDIV","height"))) + "px");
}
function getDocHeight() {
    var r = document.getElementsByTagName('html')[0].getClientRects();
    return r[0].height;
}
function setProperty(id,prop,value) {
    document.getElementById(id).style.setProperty(prop,value,null);
}
function getProperty(id,prop) {
    var p;
    if (document.getElementById(id).currentStyle)
        p = document.getElementById(id).currentStyle[prop];
    else if (window.getComputedStyle)
        p = document.defaultView.getComputedStyle(document.getElementById(id),null).getPropertyValue(prop);
    return p;
}