是否可以重新定位位置：绝对 DIV？答案

【问题标题】：Is it possible to re-position a position:absolute DIV?是否可以重新定位位置：绝对 DIV？
【发布时间】：2012-05-26 23:13:21
【问题描述】：

场景：-

已发布的 HTML 页面具有 position:absolute DIV，并且所有 DIV 高度都设置为特定的 px 值。该页面可通过 Surreal 或 Cushy 等在线 CMS 进行编辑。编辑器输入了 DIV 旨在获取的更多内容。结果是多余的内容溢出了DIV，页面设计被丢弃了。

当编辑器这样做时，有什么方法可以使 DIV 高度扩展并且页面上的所有其他 DIV 都向下移动？请记住，DIV 高度不能设置为 100%，而是具有固定的 px 值。

我假设解决方案可能是 jQuery 或 JavaScript - 有什么想法吗？

<body>

 <div id="two" style="position:absolute;left:163px;top:0px;width:738px;height:269px;z-index:5;padding:0;">
      <img src="images/two.jpg" id="two" alt="two" border="0" title="two" style="width:738px;height:269px;">
 </div>

 <div id="three" style="position:absolute;left:0px;top:350px;width:900px;height:294px;z-index:6;" class="editable">
 <!-- div content -->
 <!-- this is where the user/editor will add content -->
 </div>

 <div id="four" style="position:absolute;left:0px;top:0px;width:900px;height:323px;z-index:7;padding:0;">
 <div id="five" style="position:absolute;left:0px;top:0px;width:162px;height:269px;z-index:0;padding:0;">
      <a href="./../apage.html"><img src="logo.gif" id="logo" alt="Logo" border="0" title="Logo" style="width:162px;height:269px;"></a>
 </div>

【问题讨论】：

没有看到网站的布局真的很难说。这取决于您是否可以将导致问题的元素包装在相对定位的元素中，以及这是否会破坏您的网站
这也取决于你是否有其他绝对定位的元素。这将开始变得艰难。没有冒犯的意思，但总的来说，几乎总有比 position:absolute 更好的方法。

标签： javascript jquery css html css-position

【解决方案1】：

我没有看到确切的场景，但是您是否考虑过固定大小的 div 中的滚动？

给那些 div 一个类，比如

<div class="bescrollable"></div>

然后在你的 css 中：

.bescrollable {overflow:auto;}

溢出时会添加滚动条

【讨论】：

【解决方案2】：

你可以像这样根据内容设置div的高度：

.container {
    position: absolute;
    width: 400px;
    height: 400px;   
}

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

<div class="container">
     <div class="content">...</div>
</div>

$('.container').css('height', $('.content').height());

这里有一个小提琴：http://jsfiddle.net/Kdktw/

正如 CBRRacer 在 cmets 中提到的，如果我们能看到 HTML，那么答案会更符合您的情况。

我希望这会有所帮助！

【讨论】：

【解决方案3】：

这将取决于框内内容的高度。可能最好的方法是将内容 div 的高度设置为 auto 并使用 javascript 来获取元素的高度。

// Using jQuery
var contentDivHeight = $('#myContentDiv').height();
var startingOffset = 250;    // The height of the div original set at startup

然后您可以简单地将这个高度添加到必须“向下”移动的每个主要显示控件。如果你给它们都分配了一个通用类，它们都可以很容易地被选中（比如“primaryInterface”之类的）。

$(document).ready(function() {
    $('.primaryInterface')each(function (i) {
        var newTop = this.offset().top + contentDivHeight - startingOffset;
        var newLeft = this.offset().left;
        this.offset({ top: newTop, left: newleft });
    });
});

此代码未经测试，但理想情况下，一旦页面加载，它将找到具有指定类的所有元素，并将它们的顶部偏移设置为 div 的起始高度和结果高度之间的差。

【讨论】：

感谢您的回答。并道歉 - 我已经有一段时间没有行动了。好吧，我认为我没有很好地解释自己。添加到 OP 的典型页面，问题在于名为“FooterLayer”的 DIV ID。如果用户在 DIV“三”中添加更多内容，我需要移动页脚层。
所以 top:700px 需要反映添加到 div "three" 中的新内容