div, показанный с jquery, обрезается

Question

Я пытаюсь бороться с странным поведением - и любая помощь приветствуется.

У меня есть длинная и сложный HTML-страница с общей структурой примерно так:

+------------------------------------------+ 
| Page header        | 
+-----------------------------+------------+ 
|        | Right  | 
| Main content    | Column | 
|        |   | 
+-----------------------------+------------+ 

В «основном содержании», все действие происходит. Одна из вещей, которые могут произойти, - это щелчок кнопки пользователя, отображается div с absolute, которая изначально невидима, и ее содержимое заполняется с помощью AJAX (т. Е. Я заранее не знаю, сколько контента есть) ,

Это прекрасно работает, если общая сумма height этого раздела заканчивается меньше, чем доступная высота «основного содержимого». Если, однако, этот «всплывающий» div заканчивается длинным из-за большого количества контента, то он усекается в нижней части раздела «Основной контент». Поскольку нет ничего ниже, я не могу даже прокрутить вниз, чтобы увидеть весь контент всплывающего окна. Я бы хотел, чтобы «основной контент» увеличивался, чтобы разместить всю высоту всплывающего окна, а страница прокручивается до самого всплывающего окна, но этого не происходит.

Вот CSS для моего "основного содержания":

.content { 
    width: 770px; 
    position: relative; 
    overflow-x: visible; 
    overflow-y: hidden; 
} 

И вот CSS для всплывающего окна:

#popupedit { 
    background-color: #f1f0ec; 
    width: 770px; 
    z-index: 100001; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    display: none; 
} 

В HTML popupedit является прямым потомком content. В цепи нет ни высоты, ни ограничения максимальной высоты. Итак, почему «контент» не подходит для размещения «всплывающих окон»?

Answer 1

Вы могли бы решить это, удалив абсолютное позиционирование и используя другую технику (то есть поплавки), чтобы расположить всплывающее окно. Позвольте мне угадать, position: absolute тоже требуется? :) Если да, то есть еще надежда: вы можете изменить размер содержимого div с помощью JavaScript после загрузки содержимого.

$(".content").css("min-height", $("#popupedit").height()+"px"); 

Конечно, это было бы работать после того, как всплывающее окно загрузится полностью, и вы, вероятно, следует отменить изменение размера после того, как всплывающее окно уходит:

$(".content").css("min-height", ""); 

Answer 2

Похоже, вы создаете всплывающее окно в div .content.

У этого есть переполнение-y: скрытое, которое скроет любое переполнение.

Попробуйте переместить всплывающее окно из содержимого div.

Answer 3

Удалить переполнение-y: скрыто; и он должен работать. Кроме того, я бы рекомендовал давать popupedit фиксированной высоте

Edit: Ok попробовать этот хак

JS:

var hh = document.getElementById('popupedit').offsetHeight; 
document.getElementById('fix').style.height = hh + "px"; 

CSS:

.content { 
    width: 770px; 
    position: relative; 
    overflow-x: visible; 
    overflow-y: hidden; 
    height: auto 
} 
#popupedit { 
    background-color: #f1f0ec; 
    width: 770px; 
    z-index: 100001; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 

#fix { width: 770px; } 

HTML:

<div class = "content"> 
    <div id = "popupedit"> 
     <p>Something important</p>     
    </div> 
    <div id = "fix"></div> 
</div> 

Answer 4

Try удаление position:relative; .content. В любом случае это не обязательно (если вам это не нужно для чего-то, чего вы не сказали). Это большое недоразумение. Многие люди используют position: relative; практически для всех элементов. Это НЕ ВСЕ.

В этом случае это может даже вызвать проблемы, так как #popupedit теперь будет позиционировать себя как своего родителя, а не окна. Я предлагаю, удаляя position: relative;, давая всплывающее окно width, вычисляя его горизонтальное положение с помощью jQuery, чтобы центрировать его.Также избавиться от top: 0; и left: 0;

Затем добавьте этот фрагмент кода в код, который вы называете для выскакивают-It-Up, или в отдельном файле (действительно не имеет значения):

$("#popupedit ").css({ 
    left: ($(window).width() - $('.className').outerWidth())/2, 
    top: ($(window).height() - $('.className').outerHeight())/2 
});​