Question

情景： -

已发布的HTML页面具有位置：绝对DIV，并且所有DIV高度都设置为特定的px值。该页面可通过在线CMS（如Surreal或Cushy）进行编辑。编辑器输入了更多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>

Answer 1

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

为这些div提供一个类，例如

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

然后在你的css中：

.bescrollable {overflow:auto;}

发生溢出时会添加

滚动条

Answer 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，如果我们能看到HTML，那么答案对您的情况会更准确。

我希望这有帮助！

Answer 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的起始高度与结果高度之间的差异。

是否有可能重新定位一个位置：绝对DIV？

3 个答案: