如何垂直增加DIV的宽度，向上即底部位置需要固定

How can i increase the width of a DIV vertically ,towards up ie bottom postition needs to be fixed

本文关键字：底部 位置 垂直 何垂直 增加 DIV      更新时间：2023-09-26

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

将以下内容放在HTML部分：

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

将以下代码放在javascript部分：

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

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

根据您的请求"向上即底部位置需要固定"，我相信您希望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>

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

相关文章：