0

私がやろうとしているのは、CV と Contact の 2 つの div ブロックをページの下部に配置することです。その上にカーソルを合わせると、この状態のようにページ全体をカバーします。margin-top プロパティで移動しようとしましたが、カーソルを合わせたときに適切に動作しませんでした。また、ユーザーの画面サイズに関係なく、スクロール バーは必要ありません。ボックスは常にページの隅に表示されます。私のソリューションはこれに対して有効ですか、またはこれらを行うにはJavaScriptが必要ですか? これが私のjsfiddleです：

http://jsfiddle.net/cR9NL/

この状況では、どの位置を使用する必要がありますか:absoluteまたはrelative?

4

2 に答える 2

1

HTMLコードはまだ同じです。以下はあなたとデモのための私のcssです:

CSS

html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }

#container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#container div {
    height: 25%;
    width: 15%;
    text-align: center;
}

#container>div:hover {
    height: 100%;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 5;
}

#upper-left{
    background: #77cc00;
    float: left;
    border: solid 3px #99ee22;
}


#upper-right{
    background: #ffdd22;
    float: right;
    border: solid 3px #ffff44;
}
#lower-right {
    position: absolute;
    bottom:0;
    right: 0;
    background: #55bbff;
    border: solid 3px #77ddff;
}
#lower-left{
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ff5522;
    border: solid 3px #ff7744;
}
#container>div>p {
    font-family: Tahoma; 
    margin: 28% auto;
    font-weight: 900;
    color: white;
    font-size: 30px;
}

デモ

http://jsfiddle.net/bartekbielawa/cR9NL/2/

于 2013-04-22T23:10:39.797 に答える
1

左下と右下の div を絶対的に配置し、それぞれ下の値を 0、左と右の値を 0 にします。

フィドル:):

position:absolute;
bottom:0;
right:0;

http://jsfiddle.net/cR9NL/1/

于 2013-04-22T23:05:44.593 に答える