Question

如果我想从div框增加高度，那么它会向底部增加。但是，如果我想从下到上增加高度，那么理想的程序是什么？

我的一个想法是使用css rotate垂直翻转div，但是可以不使用css转换吗？如果是，那怎么样？

Answer 1

您可以将div插入“table cell”元素（如果使用HTML＆amp; CSS定义，也可以是div） - 并设置其css vertical-align:bottom。

尝试这样的事情：

<强> CSS

.span
{
    width: 100%;
    height: 100%;
}

.tbl
{ display: table; }

.row
{ display: table-row; }

.col
{ display: table-cell; }

.pull-down
{ vertical-align: bottom; }

.box
{
    width: 320px;
    height: 240px;
}

.dbug
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background:#BADA55 !important;
    border:1px solid #A00 !important;
    min-width:6px;
    min-height:6px;
}

<强> HTML

<div class="tbl span">
    <div class="row span">
        <div class="col span pull-down">
            <div class="box dbug"></div>
        <div>
    </div>
</div>

现在，如果你增加“box”div的高度，它的高度将增加到顶部。

Answer 2

要使div向上扩展，您可以执行以下操作：

CSS：

div {
  width: 20px;
  background: red;
  position: absolute;
  bottom: 0;
}

JS：

var x = document.getElementsByTagName("div")[0];
var p = 0;

function fn() {
    p += 1;
    x.style.height = p + "px";
    requestAnimationFrame(fn);
}

fn()

在这里你可以看到，只有当这个位置是绝对的时候才有效。将它放在父容器的最底部，你将强制div生长到顶部。

让div从下到上成长

2 个答案: