Question

如何垂直增加DIV的高度，向上，即需要修复底部的帖子。（需要用JavaScript和HTML编写代码）。根据可用内容，高度应该会增加

Answer 1

将以下内容放在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秒）

Answer 2

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

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

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

anim("Main", {marginTop:"-400px", height:"410px"}, 4000);

Answer 3

将以下内容放在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";

Answer 4

根据你的要求“向上，即需要修复底部邮件”，我相信你希望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>

如何垂直增加DIV的宽度，朝向上方的位置需要固定

4 个答案: