When I try to zoom out in my browser, the elements within #workspaceMain such as #pagename, #toolbar, #content, and #tabs do not expand to fill the remaining space within #workspaceMain, even though I have set all widths to 100%. The width of #workspaceMain has been set to 70% to allow space for the sidebar #workspaceSide on the right.
At 100% zoom, everything looks normal, but at lower zoom levels like 75%, the elements do not occupy the available white space.
Can anyone suggest a solution to this issue?
https://i.sstatic.net/1it7D.png
https://i.sstatic.net/ObTIU.png
Here is the code snippet:
/* This is a CSS snippet */
/* All rights reserved @SomeCompany. 2022 */
html > body {
height: 100%;
overflow: hidden;
font-family: "Trebuchet MS", sans-serif;
}
/* Other CSS styles... */
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Sample Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel="stylesheet" href="../style.css" type="text/css">
<script src="https://kit.fontawesome.com/1de2bd6ce5.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a href="#" class="current" title="Home Workspace"><i class="fal fa-home"></i></a>
<a href="#" title="Learning Workspace"><i class="fal fa-chalkboard"></i></a>
<a href="#" title="Student Management Workspace"><i class="fal fa-user"></i></a>
<a href="#" title="Administration Workspace"><i class="fal fa-cog"></i></a>
<div class="navLinks">
<button title="Quick Links"><i class="fal fa-bookmark"></i></button>
<button title="Sign Out"><i class="fal fa-sign-out-alt"></i></button>
</div>
</div>
<div id="workspaceMain">
<div id="pagename"><i class="fal fa-door-open"></i> Welcome</div>
<div id="toolbar">
<button class="toolLinks" title="Save Changes"><i class="fal fa-save"></i> Save</button>
<button class="toolLinks" title="Print This Page"><i class="fal fa-print"></i> Print</button>
</div>
<div id="content">
<h3 class="mainHeader" contenteditable="true">School</h3>
<table class="gridSet">
<caption class="gridName" contenteditable="true">Weekly Outline</caption>
<!-- Table content here -->
</table>
</div>
<div id="tabs">
<a href="#" title="Notices"><i class="fal fa-newspaper"></i> Notices</a>
<a href="#" title="Dashboard"><i class="fal fa-chart-line"></i> Dashboard</a>
<a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> Timetable</a>
<a href="#" class="current" title="Welcome"><i class="fal fa-door-open"></i> Welcome</a>
</div>
</div>
<div id="workspaceSide">
<div id="tabsPanel">
<button class="current" title="Summit News"><i class="fal fa-newspaper"></i></button>
</div>
<div class="infoPanel"></div>
</div>
</div>
</body>
</html>If anyone has a solution, please share. Thank you, Tom