0

如何垂直增加 DIV 的高度，向上即底部位置需要固定。（需要用 JavaScript 和 HTML 编写代码）。高度应根据可用内容向上增加

4

4 回答 4

0

将以下内容放在 HTML 部分中：

<div id="Main" style="height:10px">

将以下代码放在 css 部分：

<style>
#Main {
  -webkit-transition:margin-top, height;
  transition:margin-top, height
}
</style>

将以下代码放在 javascript 部分中：

document.getElementById("Main").style.marginTop = "-400px";
document.getElementById("Main").style.height = "410px";
于 2013-02-22T06:38:54.207 回答
0

根据您的要求“向上，即底部位置需要固定”，我相信您希望 DIV 在底座不动的情况下长得更高。

神奇之处在于将绝对定位的 div A 放入相对定位的 div B 中，并将 B 的位置定位在 A 的底部。随着 B 的底部设置，增加 B 的高度会使其从那个固定的位置。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        body {
            background-color: #abc;
        }
        div {
            width: 200px;
            margin: auto;
        }
        #A {
            position: relative;
            background-color: #369;
            height: 500px;
        }
        #B {
            position: absolute;
            bottom: 0px;
            background-color: #69C;
            height: 200px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <div id="A">
        <p>This is A</p>
        <div id="B">
            <p>This is B</p>
        </div><!-- /B -->
    </div><!-- /A -->
</body>
<script>
    $(document).ready(function(){
        $('#B').animate({'height': 400}, 3000);
    });
</script>
</html>
于 2013-02-22T07:19:33.237 回答
0

将以下内容放在 HTML 部分中：

<div id="Main" style="height:10px">

将以下代码放在 javascript 部分中：

anim("Main", {marginTop:"-400px", height:"410px"}, 4000);
于 2013-02-22T06:30:09.943 回答
0

将以下内容放在 HTML 部分中：

<div id="Main" style="position:absolute;top:10px;height:100px;width:100px">

将以下代码放在 javascript 部分中：

 $(document).ready(function () {
    $("#Main").animate({height:'400px'},4000);
 });

这 4000是它应该发生的时间（4000 = 4秒）

于 2013-02-22T06:11:36.250 回答