Question

我希望我的#wrap具有 bottom：0 ，以便我的卡片全部对齐到视口底部但是当我没有时它似乎不起作用应用位置绝对值到包装器。为什么会这样？

<div id="wrap">
<div class="card" id="card1">black</div>
<div class="card" id="card2">pink</div>
<div class="card" id="card3">orange</div>
</div>

CSS

.card{
    border:1px solid black;
    height:120px;
    width:100px;
    position:absolute;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#wrap{
    position:absolute;
    bottom:0;
    height: 100% !important;
min-height: 100% !important;
}

#card1{
    background:black;
    top:0;
}

#card2{
    background:pink;
    top:10px;
}

#card3{
    background:orange;
    top:20px;
}

http://jsfiddle.net/t94vdwak/1/

Answer 1

你去哥们

http://jsfiddle.net/incept0/rrapj20o/4/

.card{
    border:1px solid black;
    height:120px;
    width:100px;
    position:absolute;
    bottom: 0;
    left: 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#wrap{
    position:absolute;
    bottom:0;
    left: 0;
    height: 120px;
    min-height: 120px;
}

#card1{
    background:black;
    top:0;
}

#card2{
    background:pink;
    top:10px;
}

#card3{
    background:orange;
    top:20px;
}

Answer 2

包装器本身必须绝对位于底部，然后卡片必须在包装器内偏移。

http://jsfiddle.net/ryvvyqfc/

.card {
    border:1px solid black;
    height:120px;
    width:100px;
    position:absolute;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#wrap{
    position:absolute;
    bottom:0;
}

#card1{
    background:black;
    top:0;
}

#card2{
    background:pink;
    top:10px;
}

#card3{
    background:orange;
    top:20px;
}

Answer 3

您似乎需要在视口底部指定一叠卡片，如果您想将项目与您可以使用的视口对齐，// Creating an element: var newDiv = document.createElement('div'); // Changing attributes of an element: newDiv.setAttribute('class','desiredClass'); // Changing the innerHTML of the element: newDiv.innerHTML = 'Desired inner HTML'; // Finally - Append the new element somewhere in the DOM (HTML Tree): document.getElementsById('SomeID').appendChild(newDiv);项目与页面对齐{{1} }。

我在这里编辑了你的样本：

＆＃13;

position: absolute

＆＃13;

position: fixed

＆＃13;

这样，即使向下滚动，您的项目也会粘在视口的底部。

它是如何工作的，包装器没有高度，但它不会隐藏溢出，卡片不是从顶部定位（如在你的例子中），而是从底部（与你所做的相反）

如果您希望这些项目超过其他内容来调整.card{ border:1px solid black; height:120px; width:100px; position:absolute; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } #wrap{ position:fixed; bottom:0; overflow: visible; } #card1{ background:black; bottom:20px; } #card2{ background:pink; bottom:10px; } #card3{ background:orange; bottom:0px; }属性，请不要忘记。

包装绝对div并不起作用

3 个答案: