Справка по макету CSS - плавная по вертикали и абсолютная

У меня есть система комментариев, которую я хочу размещать справа от моей страницы, абсолютное позиционирование:

Я хочу, чтобы в поле было максимальное количество комментариев, не слишком беспокоясь о высоте, так как я ограничиваю символы

Но я хочу, чтобы поля комментариев расширялись вертикально на основе текста:

Итак, внешняя оболочка имеет ширину 200 пикселей, тогда каждая строка имеет ширину 200 пикселей, плавающий левый div 50 пикселей для изображения пользователя, правый плавающий элемент div 150 пикселей для комментария (раздел комментария должен расширяться по вертикали - на самом деле не может иметь минимальную высоту, так как ответ из одного слова будет 16 пикселей макс.)

Это возможно? На данный момент я пытаюсь установить минимальную высоту в блоке комментариев с помощью overflow: auto, но это просто вызывает полосы прокрутки, которые мне абсолютно не нужны, если я могу помочь.


css css-position fluid-layout
person StudioTime    schedule 16.10.2012    source источник
comment
Я не понимаю, где проблема. По умолчанию <div> расширяется по вертикали, когда внутри много содержимого.   -  person Madara's Ghost    schedule 16.10.2012
comment
Установите для переполнения значение hidden, если вам не нужна полоса прокрутки. Мы не знаем, с чем еще у вас проблемы.   -  person Scott Hillson    schedule 16.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вполне вероятно, что проблема (код не указан, я не могу подтвердить) заключается в том, что ваш div с абсолютным позиционированием находится внутри ничего. Это приводит к тому, что div пытается занять минимальное пространство, отсюда и полосы прокрутки.

Обычно это происходит, когда вы позиционируете что-то абсолютное в элементе, который уже позиционируется как абсолютный. Абсолютный элемент выносится из родительского контекста, поэтому родительский контейнер не занимает места для того, что находится внутри. Таким образом, элемент в absolute только с одним элементом также в absolute будет действовать так, как если бы он был пустым.

Я сделал это небольшое демо

посмотрите, что произойдет, если вы измените эту строку:

.comment {position:relative;border:1px solid yellow;padding:3px; margin;3px;}

к этому :

.comment {position:absolute;border:1px solid yellow;padding:3px; margin;3px;}

Бам, полосы прокрутки.

person Kraz    schedule 16.10.2012