css 如何将div向下或向上移动？

mpbci0fu 于 2023-04-23 发布在其他

关注(0)|答案(6)|浏览(254)

我有两个div，top div的样式如下：

.context_left {
    float:left;
    display:inline-block;
    width:775px;
    padding-left:10px;
    margin-top:20px;
    min-height:450px;
    margin-bottom:20px;   
}

而它下面的div具有样式：

.footer {
        width:100%;
        height:54px;
        display:block;
        position: absolute;
        margin-top:80px;
        left:0;   
  }

当div context_left改变它的高度时，div的页脚仍然保持在它的位置，如果context_left div改变了它的高度，我想把页脚div向下移动。有人能帮我吗？

css

来源：https://stackoverflow.com/questions/18355698/how-to-move-div-down-or-up

6条答案

按热度按时间

qyyhg6bp1#

您是否尝试将此lign添加到您的。页脚

clear:both;

并删除位置：绝对的;

赞(0）回复(0）举报 2023-04-23

xoshrz7s2#

您已将页脚设置为位置：这意味着你的页脚应该是固定的，但是从它的父级继承。
尝试将绝对值更改为相对值，看看这是否是您想要的。

赞(0）回复(0）举报 2023-04-23

0wi1tuuw3#

.footer {
    width:100%;
    height:54px;
    display:block;
    margin-top:80px;
    left:0;   
}

删除了页脚中的position: absoulte。试试这个。因为页脚将保持在相同的位置，直到position：absolute保留在样式中。

赞(0）回复(0）举报 2023-04-23

6tqwzwtp4#

CSS：

.context_left {
        float:left;
        width:775px;
        padding-left:10px;
        margin-top:20px;
        min-height:450px;
        margin-bottom:20px;  
        display:inline-block;

    }

      .footer {
            width:100%;
            height:54px;
            display: block;
            clear:both;
            margin-top:80px;
            left:0;   

      }

工作提琴：http://jsfiddle.net/dMawS/show

赞(0）回复(0）举报 2023-04-23

fzwojiic5#

如果页面底部的粘性页脚是您正在寻找的，那么这可以帮助您：

html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* the margin compensates the footer plus the footer's top margin */
    margin: 0 0 134px 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 54px;
}

页脚将始终位于浏览器视区的底部 * 或内容下方 *。

Demo

Try before buy

赞(0）回复(0）举报 2023-04-23

ttvkxqim6#

你可以在JavaScript中使用一个新的ResizeObserver。它有一个“callback”参数，和一个“observe（）”方法，该方法有一个“target”参数。试试这个，它完全精确。

<html>
<head>
<style>
#div001{position:absolute;top:20px;left:0.2cm; height:300px;width:12cm;background:blue;resize:both;overflow:auto;}
#div002{position:absolute;top:350px;bottom:0.2cm;width:12cm;background:gray;resize:both;overflow:auto;}
</style>
</head>
<body>
<div id='div001'>Texte de la div</div>
<div id="div002"></div>
<script>
const dv001 = document.querySelector("#div001");
const dv002 = document.querySelector("#div002");
var observer = new ResizeObserver(()=>{dv002.style.top = dv001.clientHeight+30+"px";});
observer.observe(dv001);
</script>
</body>
</html>

赞(0）回复(0）举报 2023-04-23

我来回答

css 如何将div向下或向上移动？

6条答案

相关问题

热门标签

最新问答