Issue: When making a specific div's position fixed (commonly used for sidebars or side menus), it overlaps with the footer when scrolling down.
body {
margin: 0;
}
#header {
width: 100%;
height: 290px;
background-color: #07CB6F;
}
#body {
width: 100%;
height: 3450px;
background-color: #2FA3F7;
}
#body_inner {
width: 1280px;
height: 3450px;
margin: 0 auto;
}
#side_menu {
width: 220px;
height: 270px;
position: fixed;
background-color: #ffffff;
}
#footer {
width: 100%;
height: 200px;
background-color: #FF00AB;
}<div id="header">
</div>
<div id="body">
<div id="body_inner">
<div id="side_menu"></div>
</div>
</div>
<div id="footer">
</div>This time, no jQuery is used. Despite setting #side_menu to height: 270px, the overlap still occurs when zooming in on the browser and based on different browsers and devices.
I am seeking insights into why this happens and how to address or prevent it from occurring.
Appreciate your assistance :)