I recently came across a solution by @RokoC.Buljan, which works perfectly on Chrome and Firefox. However, I encountered an issue with Safari where the content section does not scroll properly and the footer sticks to the bottom of the content, making it difficult to access.
Is there a way to fix this problem specifically for Safari/iOSsafari? Alternatively, are there any alternative solutions that are compatible with all browsers?
Here is the HTML code:
<div id="view">
<div id="appear"> Content that appears </div>
<div id="header"> Header </div>
<div id="content"> <h1>Content</h1> <p>Lorem ipsum...</p> </div>
<div id="footer"> Footer </div>
</div>
The CSS code (which uses calc for dynamic seems supported, but could this be causing the issue?):
#view {
overflow: hidden; /* NO SCROLLBARS */
margin: 0 auto;
background-color: #000;
color:#fff;
width: 100vw;
max-width: 350px;
height: 100vh;
}
#appear{
display:none;
}
#header,
#footer {
height: 44px; /* note this */
background-color: #555;
}
#content {
overflow-y: scroll; /* SCROLLBARS !!!*/
height: calc(100% - 88px); /* 44+44 = 88px */
}
jQuery script (which sets fixed heights for header and footer, uses calc(100% - 88px) for the scrollable content, and slides down the appear section from above using calc):
$("#view").on("click", "#header", function () {
var $appear = $('#appear');
var io = this.io ^= 1; // Toggler
$appear.show(); // Temporarily show
var animH = $appear.height(); // Get height and
if(io) $appear.hide(); // fast hide.
$appear.slideToggle(); // Now do it with animation
$('#content').animate({ // Animate content height
height: (io?"-=":"+=")+animH
},{
step: function() {
$(this).css("overflow-y", "scroll");
},
complete : function(){
var h = 88 + (io?animH:0); // header+footer = 88px
$(this).css({height: "calc(100% - "+ h +"px)"});
}
});
});