рони, применил position: sticky; к вашему коду
<!DOCTYPE html>
<html>
<head>
<style>
html * {
margin: 0;
padding: 0;
}
.block {
height: 300px;
width: 600px;
margin: 30px auto;
}
#content {
height: 300px;
overflow: auto;
background-color: #D3D3D3;
}
.wrapper {
height: 1500px;
}
footer {
background-color: #8B4513;
height: 300px;
border-top: 1px dashed yellow;
}
.sidebar {
height: 50px;
position: -webkit-sticky; /* Safari */
position: sticky;
bottom: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="block">
<div id="content">
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="sidebar">fixed block</div>
<footer>
<p>footer text</p>
</footer>
</div>
</div>
</body>
</html>
Поддержка браузерами очень хорошая
caniuse.com/#feat=css-sticky, в супер старых браузерах содержимое всё-равно остаётся доступным
UPD Если нужно, чтобы блок был именно так как с
position: sticky? то можно примерно так эмулировать...
<!DOCTYPE html>
<html>
<head>
<style>
html * {
margin: 0;
padding: 0;
}
.block {
height: 300px;
width: 600px;
margin: 30px auto;
}
#content {
height: 300px;
overflow: auto;
background-color: #D3D3D3;
}
.wrapper {
height: 250px;
overflow: auto;
}
footer {
background-color: #8B4513;
height: 300px;
border-top: 1px dashed yellow;
}
.sidebar {
height: 50px;
bottom: 0;
background-color: red;
}
@supports(position: sticky) {
.wrapper {
height: auto;
}
.sidebar {
position: sticky;
}
}
</style>
</head>
<body>
<div class="block">
<div id="content">
<div class="wrapper">
<p style="padding-bottom: 1500px;">
Пусть содержимое длинное...
Your website content here.
</p>
</div>
<div class="sidebar">fixed block</div>
<footer>
<p>footer text</p>
</footer>
</div>
</div>
</body>
</html>