Как сделать ограничение плавающему элементу?
Если есть контент, который должен «плавать» внутри непосредственного родительского блока без сложной логики этого действия, то можно использовать position: sticky;. Но он поддерживается не всеми браузерами. 
Для условной автоматизации этого дела есть хороший плагин https://dollarshaveclub.github.io/stickybits — там, где нет sticky, он сделает с помощью fixed и наоборот.position: sticky; хорош тем, что он не добавляет никаких слушателей прокруток и т. п., что положительно сказывается на производительности страницы.
P. S. Но без JS не обойтись вовсе, если нужно добавить логику по типу «если плавающий элемент доходит до какого-то элемента внутри общего родительского блока, то сделать то-то, то-то».
можно через скрипт вычислять высоту страницы и высоту футера с хэдеров. после чего, этому элементу ставить отступ сверху равный высоте хэдера, и отступ снизу = высоте футера. ну и высоту самого элемента, равную высоте страницы минус сумма высот футера с хэдером.