Check out this link for my code
While my layout works perfectly in most browsers, it faces some issues specifically on the Chromium browser and Android default browser. Here's what I'm trying to achieve:
- The header should remain fixed at the top
- There should be internal scrolling only; no page scroll. The layout consists of three columns.
The problem arises when viewing the website on mobile browsers – the window scroll appears even though I've set the content to fit within the device/browser height.
This is a snippet of the HTML code I am using:
<html>
<!-- HTML code goes here -->
</html>
And here is the related CSS code:
/************** Main CSS Styles **************/
body {
/* Body styles go here */
}
#container {
/* Container styles go here */
}
#content {
/* Content styles go here */
}
#aside {
/* Aside styles go here */
}
#section-navigation {
/* Section navigation styles go here */
}
header {
/* Header styles go here */
}