Как сделать так, чтобы элемент html расширялся до верхней части страницы с его содержимым?

Заголовок в значительной степени говорит обо всем, когда в div добавляется дополнительный текст, он должен удерживать нижнюю границу div на том же месте, а верхняя граница должна подниматься настолько высоко, насколько это необходимо, чтобы добавить дополнительный текст. Ширина фиксированная.
Я не пробовал много разных вещей, потому что не могу найти ничего похожего.


РЕДАКТИРОВАТЬ: причина, по которой я хочу это сделать, заключается в том, что я хочу привязать нижний правый угол элемента html к определенному месту в моем средстве просмотра цезия. На данный момент я просто исправил ширину, но я мог бы использовать то же самое для ширины. Нижний правый угол должен сохранять свое положение рядом с объектом на карте цезия.


html css cesium
person Jan-Pieter Van Parys    schedule 17.09.2019    source источник
comment
не могли бы вы привести пример?   -  person demkovych    schedule 17.09.2019
comment
@Satif Я добавил это.   -  person Jan-Pieter Van Parys    schedule 17.09.2019
comment
пожалуйста, могу я запросить скрипку: codepen.io   -  person Jason Is My Name    schedule 17.09.2019
comment
@JasonIsMyName Я никогда не использовал скрипку, могу ли я использовать там цезий, потому что я получаю положение символа с цезием?   -  person Jan-Pieter Van Parys    schedule 17.09.2019
comment
Мне нужно увидеть ваш css. Если у вас есть только версия вашего css с переменными, просто сохраните их там, я смогу понять, что происходит, по крайней мере c:   -  person Jason Is My Name    schedule 17.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

Как правило, при использовании абсолютного позиционирования вместо указания местоположения с помощью top и left вы можете поменять местами некоторую комбинацию bottom и right. Когда вы это делаете, координаты измеряются с другой стороны (нижней или правой стороны соответственно), поэтому, если у вас есть координаты в верхнем левом углу, вы должны вычесть их из ширины или высоты области.

Вот демонстрационный. Часть, которая была изменена здесь, выглядит так:

    // Set the HTML position to match the entity's position.
    testElement.style.right =
        (viewer.container.clientWidth - position2d.x) + 'px';
    testElement.style.bottom =
        (viewer.container.clientHeight - position2d.y) + 'px';

Остальное совпадает с этим ответом, только обновлено, чтобы использовать right и bottom вместо top и left.

person emackey    schedule 17.09.2019
comment
Спасибо, это отлично сработало, мне пришлось добавить / вычесть постоянное постоянное количество пикселей, чтобы стрелка всплывающего окна находилась в нужном месте. Для меня это был ответ: mouseOverPopUp.style.right = (viewer.container.clientWidth - entity_pos.x + 50) + 'px'; mouseOverPopUp.style.bottom = (viewer.container.clientHeight - entity_pos.y - 55) + 'px' ;. - person Jan-Pieter Van Parys; 18.09.2019
comment
Занимает ли viewer.container всю страницу или вокруг него есть поле 50/55 пикселей? Вместо viewer.containder.clientWidth попробуйте использовать элемент, содержащий всплывающее окно. Можно также попробовать document.body, если это то, что его содержит. Но я рад, что это работает. - person emackey; 18.09.2019
comment
В настоящий момент у меня нет доступа к коду, но я попробую его, когда получу. - person Jan-Pieter Van Parys; 19.09.2019

arrow_upward
1
arrow_downward

Если вы можете установить фиксированную ширину, вы можете сделать это с помощью position: fixed:

.tooltip {
  border: 1px solid black;
  bottom: 10px;
  padding: 15px;
  position: fixed;
  right: 10px;
  width: 200px;
}
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

person Ted Whitehead    schedule 17.09.2019
comment
Это не сработало для меня, ответ @emackey устранил проблему. Спасибо, что нашли время ответить. - person Jan-Pieter Van Parys; 18.09.2019