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

There is something that I need to do using HTML and CSS, without javascript.

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

I need help to define the css of "Outer Div". It has to go all the way to the bottom of the page. The height has to be 100% - 90px. The header has a fixed height. Inner Div's height has to be 60% of the height of Outer Div.

我需要帮助来定义“外部分区”的CSS。它必须一直到页面底部。高度必须是100％ - 90px。标题具有固定的高度。内部Div的高度必须是外部Div的高度的60％。

Can anyone help me? I can use html5 or css3 if needed.

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

3 个解决方案

#1

It is very easy to do this without JavaScript if all the dimensions are in %, but since 90px height is compulsory for the header, try these steps:

如果所有维度都是％，则很容易在没有JavaScript的情况下执行此操作，但由于标题必须使用90px高度，请尝试以下步骤：

1) Give the Header a z-index value greater than the Outer-Div, for example:

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

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

2) Now, give the Header the following style:

2）现在，给Header以下样式：

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

3) And, the following style to the Outer-Div:

3）并且，外部Div的以下风格：

.outer-div{height:100%;}

4) Because you want the Inner-Div to be always visible, first you have to take it away from the Header, because Header has a higher z-index than Outer-Div, so:

4）因为你希望Inner-Div始终可见，所以首先你必须把它从标题中拿走，因为Header的z-index比Outer-Div高，所以：

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

5) Then give it a suitable height, I advise to use % inside of pixels for this Inner-Div:

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

.inner-div{height:50%;}

#2

To make Outer Div's height 100%-90px, use:

要使外部Div的高度为100％-90px，请使用：

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

To make Inner Div's height 60%, use:

要使Inner Div的身高达到60％，请使用：

#innerdiv {
    height: 60%;
}

Both are in addition to your normal styles. Replace #outerdiv and #innerdiv with the IDs or classes of your outer and lower divs.

两者都是正常风格的补充。将#outerdiv和#innerdiv替换为外部和下部div的ID或类。

If you want to make the panel travel down the page as the user scrolls, use this method on SO. It is easy CSS. Just add position: fixed to Outer Div's CSS.

如果您想在用户滚动时让面板沿着页面向下移动，请在SO上使用此方法。这很容易CSS。只需添加位置：固定到外部Div的CSS。

Hope this helps!

希望这可以帮助！

#3

In javascript you sould catch the body resize event and in this event you have to calculate the height of Outer DIV. The following code sould be a good start for you:

在javascript中你可以捕获body resize事件，在这种情况下你必须计算外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;
}