Question

我要做的是，在页面底部放置两个div块，CV和Contact，当它悬停在它上面时，它们会覆盖整个页面，就像它们在这种状态下一样。我试图用margin-top属性移动它们，但是当我在它们上面徘徊时它们表现得不正常。此外，我不希望任何用户屏幕尺寸的滚动条，框总是出现在页面的一角。我的解决方案对此有效，还是我需要一些javascript来执行这些操作？这是我的jsfiddle：

http://jsfiddle.net/cR9NL/

在这种情况下我应该使用哪些职位：absolute或relative？

Answer 1

使左下和右下div成为绝对值，底值为0，左右值为0。

小提琴:)：

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

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

Answer 2

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/

在底部放置两个div块

2 个答案: