Я бы посоветовал сделать это с помощью CSS и избегать JavaScript, если это возможно. Поэтому избегайте абсолютного позиционирования, когда это возможно, и при позиционировании абсолютно используйте процентные значения, а не значения пикселей, где это возможно, используйте right вместо left, когда при позиционировании элементов вы хотите закрепить право, используйте bottom вместо top при позиционировании элементов. вы хотите привязать его к нижней части и т. д. и т. д. Например: пусть браузер справится с этим за вас.
Пример:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Resize Demo Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
#anchorRight {
position: absolute;
right: 0px;
top: 20%;
border: 1px solid black;
}
#anchorBottom {
position: absolute;
bottom: 0px;
left: 20%;
border: 1px solid black;
}
#anchorBoth {
position: absolute;
right: 0px;
bottom: 0px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Look, Ma, no JavaScript required.</p>
<div id='anchorRight'>Anchor right, 20% from top</div>
<div id='anchorBottom'>Anchor bottom, 20% from left</div>
<div id='anchorBoth'>Anchor bottom and right</div>
</body>
</html>
Чистое решение CSS не всегда возможно. При работе с JavaScript вам придется следить не только за событиями изменения размера окна, но и за изменением размера текста, что является более болезненным (Google Closure библиотека включает в себя утилиты для этого). Также убедитесь, что встроен гистерезис , чтобы избежать слишком частого перемещения элементов во время фактической операции изменения размера. (Простой способ сделать это - отреагировать на изменение размера, установив функцию, которая будет вызываться setTimeout через четверть секунды, и запомнив дескриптор таймера; если вы получили другое событие изменения размера до вызова функции, отмените более ранний таймер и установите новый. Вы можете установить максимальное количество раз, которое вы откладываете изменение размера, прежде чем идти вперед [чтобы показать промежуточные обновления], но, поскольку перемещение этих вещей с помощью JavaScript может быть немного медленным, вы не хотите делать это каждое промежуточное событие , которое вы получаете во время операции.)