html - html と css を使用してページの右側に貼り付けられたパネル

Question

JavaScript を使用せずに、HTML と CSS を使用して行う必要があることがあります。

「Outer Div」の css を定義するのに助けが必要です。ページの一番下まで移動する必要があります。高さは 100% ～ 90px である必要があります。ヘッダーの高さは固定です。Inner Div の高さは、Outer Div の高さの 60% である必要があります。

誰でも私を助けることができますか？必要に応じて、html5 または css3 を使用できます。

Answer 1

すべての寸法が % である場合、JavaScript を使用せずにこれを行うのは非常に簡単ですが、ヘッダーには 90 ピクセルの高さが必須であるため、次の手順を試してください。

1) HeaderにOuter-Divz-indexより大きい値を指定します。例:

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

2) 次に、ヘッダーに次のスタイルを指定します。

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

3) そして、次のスタイルをOuter-Div に:

.outer-div{height:100%;}

4) Inner-Divを常に表示する必要があるため、最初にHeaderから離す必要があります。これは、HeaderがOuter-Divz-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 と下の div の ID またはクラスに置き換えます。

ユーザーがスクロールするときにパネルをページの下に移動させたい場合は、SO でこのメソッドを使用します。簡単なCSSです。position: fixedOuter Div の CSS に追加するだけです。

お役に立てれば！

Answer 3

javascriptでは、ボディのサイズ変更イベントをキャッチする必要があります。このイベントでは、外部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;
}