Можно ли изменить положение: абсолютный DIV? - PullRequest
Новая
       5

Можно ли изменить положение: абсолютный DIV?

2 голосов
/ 04 ноября 2011

Сценарий: -

Опубликованная 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>

Ответы [ 3 ]

1 голос
/ 04 ноября 2011

Вы можете установить высоту 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, ответ был бы более точным в вашей ситуации.

Надеюсь, это поможет!

1 голос
/ 04 ноября 2011

Я не вижу точно сценария, но рассматривали ли вы прокрутку в пределах ваших фиксированных размеров div?

Дайте класс этим элементам, таким как 

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

, а затем в вашей css: 

.bescrollable {overflow:auto;}

полосы прокрутки будут добавлены при переполнении

0 голосов
/ 04 ноября 2011

Это будет зависеть от высоты содержимого внутри поля. Вероятно, лучшим способом было бы установить высоту содержимого 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 и результирующей высотой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...