html - 缩小时页面上的元素不会填满页面

Question

当我在浏览器中缩小时，#workspaceMain 中的元素如 #pagename、#toolbar、#content 和 #tabs 不会填充 #workspaceMain 中的剩余屏幕空间，即使我已将所有宽度设置为 100%。 #workspaceMain 宽度已设置为 70%，以适应右侧的侧边栏 #workspaceSide。

您可以看到当缩放设置为 100% 时，它看起来完全正常，例如当缩放设置为 75% 时，元素将不会填充剩余的空白区域。

我该如何修复这个错误。

代码:

/*
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
*/

html > body {
    height: 100%;
    overflow: hidden;
    font-family: "Trebuchet MS", sans-serif;
}

#wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
    background: #FFF;
}

#navigation {
    height: 100%;
    width: 40px;
    float: left;
    position: relative;
    background: #1B315E;
}

#navigation > a {
    display: block;
    margin: 12px 0 12px 4px;
    padding: 12px 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    text-align: center;
    font-size: 18pt;
    color: #FFF;
}

#navigation > a.current {
    background: #FFF;
    color: #1B315E;
}

#navigation > a:not(.current):hover {
    background: #FFF;
    opacity: 0.75;
    color: #1B315E;
}

#navigation > .navLinks {
    bottom: 40px;
    position: absolute;
    left: 2px;
}

#navigation > .navLinks > button {
    margin: 0 0 8px 0;
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
    color: #FFF;
    font-size: 14pt;
}

.buffer {
    display: block;
    margin: 0 0 120px 0;
}

#workspaceMain {
    float: left;
    height: 100%;
    width: 70%;
    position: relative;
    border: 2px solid #FFF;
    background: #FFF;
}

#pagename {
    float: left;
    width: 100%;
    font-size: 14pt;
    color: #1B315E;
    background: #FFF;
}

#toolbar {
    width: 100%;
    background: #CCC;
    border-bottom: 2px solid #BBB;
}

#toolbar > .toolLinks {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    padding: 4px 4px;
    margin: 0 0 0 4px;
    font-size: 10pt;
    color: #1B315E;
    text-transform: uppercase;
}

#content {
    position: relative;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}

.mainHeader {
    text-align: center;
    text-transform: uppercase;
    color: #1B315E;
}

.gridSet {
    width: 100%;
    font-size: 12pt;
    color: #1B315E;
}

.gridName {
    text-align: center;
    font-weight: bold;
}

table, th, td {
    border-collapse: collapse;
    border: 1px solid #1B315E;
}

table, th {
    background: #1B315E;
    text-align: center;
    color: #FFF;
    width: 50%;
}

table, tr {
    background: #BBB;
    color: #1B315E;
}

td {
    text-align: left;
    padding: 12px;
}

#tabs {
    position: fixed;
    bottom: 0;
    width: 70%;
    height: 30px;
    overflow: hidden;
    background: #CCC;
    border-top: 2px solid #BBB;
}

#tabs > a {
    float: left;
    display: block;
    padding: 4px 4px;
    margin: 0 0 0 4px;
    text-align: center;
    text-decoration: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 10pt;
    color: #1B315E;
    text-transform: uppercase;
}

#tabs > a.current {
    background: #FFF;
    color: #1B315E;
}

#tabs > a:not(.current):hover {
    background: #FFF;
    opacity: 0.75;
    color: #1B315E;
}

#workspaceSide {
    margin: 0 0 0 70%;
    height: 100%;
    width: 340px;
    top: 0;
    right: 0;
    float: right;
    position: absolute;
    overflow: hidden;
    background: #1B315E;
}

#tabsPanel {
    position: fixed;
    float: right;
    right: 0;
    bottom: 0;
    width: 336px;
    height: 30px;
    overflow: hidden;
    background: #CCC;
    border-top: 2px solid #BBB;
}

#tabsPanel > button {
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
    display: block;
    padding: 4px 8px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 10pt;
    color: #1B315E;
}

#tabsPanel > button.current {
    background: #FFF;
    color: #1B315E;
}

.infoPanel {
    width: 336px;
    height: calc(100vh - 32px);
    float: right;
    position: relative;
    right: 0;
    top: 0;
    overflow: hidden;
}

.infoPanel > iframe {
    width: 100%;
    height: calc(100vh - 32px);
    top: 0;
    right: 0;
}

<!DOCTYPE HTML>
<!--
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
    <title>Welcome &#8212; Summit</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"> <!-- Internal Stylesheet -->
    <script src="https://kit.fontawesome.com/1de2bd6ce5.js"></script> <!-- Font Awesome (PRO) -->
    </head>
    
    <body>
    <div id="wrapper">
        
        <!-- Navigation (Side) -->
        <div id="navigation">
        <div class="buffer"></div>
        <a href="#" class="current" title="Home Workspace"><i class="fal fa-home"></i></a> <!-- Home Workspace -->
        <a href="#" title="Learning Workspace"><i class="fal fa-chalkboard"></i></a> <!-- Learning Workspace -->
        <a href="#" title="Student Management Workspace"><i class="fal fa-user"></i></a> <!-- Student Management Workspace -->
        <a href="#" title="Administration Workspace"><i class="fal fa-cog"></i></a> <!-- Administration Workspace -->
        <div class="navLinks">
        <button title="Quick Links"><i class="fal fa-bookmark"></i></button> <!-- Quick Links -->
        <button title="Sign Out"><i class="fal fa-sign-out-alt"></i></button> <!-- Sign Out -->
        </div>
        </div>
        
        <!-- Workspace (Main) -->
        <div id="workspaceMain">
            
            <!-- Name of Page -->
            <div id="pagename"><i class="fal fa-door-open"></i> Welcome</div>
            
            <!-- Toolbar -->
            <div id="toolbar">
            <button class="toolLinks" title="Save Changes"><i class="fal fa-save"></i> Save</button> <!-- Save -->
            <button class="toolLinks" title="Print This Page"><i class="fal fa-print"></i> Print</button> <!-- Print -->
            </div>
            
            <!-- Main Content -->
            <div id="content">
                
                <!-- Weekly Outline (Table) -->
                <h3 class="mainHeader" contenteditable="true">School</h3>
                <table class="gridSet">
                <caption class="gridName" contenteditable="true">Weekly Outline</caption>
                
                <tr><th>Date</th><th>Outline</th></tr> <!-- Column Categories -->
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                
                </table>
            
            </div>
        
            <!-- Navigation (Bottom) -->
            <div id="tabs">
            <a href="#" title="Notices"><i class="fal fa-newspaper"></i> Notices</a> <!-- Notices -->
            <a href="#" title="Dashboard"><i class="fal fa-chart-line"></i> Dashboard</a> <!-- Dashboard -->
            <a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> Timetable</a> <!-- Timetable -->
            <a href="#" class="current" title="Welcome"><i class="fal fa-door-open"></i> Welcome</a> <!-- Welcome -->
            </div>
            
        </div>
        
        <!-- Workspace (Side) -->
        <div id="workspaceSide">
        
            <!-- Panel Tabs (Bottom) -->
            <div id="tabsPanel">
            <button class="current" title="Summit News"><i class="fal fa-newspaper"></i></button> <!-- Summit News -->
            </div>
            
            <!-- Panel Content (News Only - Amend CSS and JS when other Tabs are added to the Bottom Panel Navigation) -->
            <div class="infoPanel"></div> <!-- Summit News iFrame (used to update across all pages automatically) -->
        
        </div>
        
        </div>
    </body>    
</html>

感谢任何帮助。谢谢，汤姆

Answer 1

我已经编辑了您的 CSS 并使用 CSS 的 flex 属性解决了您的问题。请比较您的 CSS 代码和这个新代码，您会明白的。
使用display: flex; 或display: table;，你可以得到这样的结果。
要了解更多信息，请参阅 https://www.w3schools.com/css/css3_flexbox.asp

/*
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
*/

/*
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
*/

html > body {
    height: 100%;
    overflow: hidden;
    font-family: "Trebuchet MS", sans-serif;
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #FFF;
    display: flex;
    align-items: stretch;
}

#navigation {
    height: 100%;
    max-width: 45px;
    float: left;
    background: #1B315E;
}

#navigation > a {
    display: block;
    margin: 12px 0 12px 4px;
    padding: 12px 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    text-align: center;
    font-size: 18pt;
    color: #FFF;
}

#navigation > a.current {
    background: #FFF;
    color: #1B315E;
}

#navigation > a:not(.current):hover {
    background: #FFF;
    opacity: 0.75;
    color: #1B315E;
}

#navigation > .navLinks {
    bottom: 40px;
    position: absolute;
    left: 2px;
    display: grid;
}

#navigation > .navLinks > button {
    margin: 0 0 8px 0;
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
    color: #FFF;
    font-size: 14pt;
}

.buffer {
    display: block;
    margin: 0 0 120px 0;
}

#workspaceMain {
    border: 2px solid #FFF;
    background: #FFF;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-content: stretch;
}

#pagename {
    float: left;
    width: 100%;
    font-size: 14pt;
    color: #1B315E;
    background: #FFF;
}

#toolbar {
    width: 100%;
    background: #CCC;
    border-bottom: 2px solid #BBB;
}

#toolbar > .toolLinks {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    padding: 4px 4px;
    margin: 0 0 0 4px;
    font-size: 10pt;
    color: #1B315E;
    text-transform: uppercase;
}

#content {
    overflow-y: scroll;
    width: 100%;
    flex-grow: 1;
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}

.mainHeader {
    text-align: center;
    text-transform: uppercase;
    color: #1B315E;
}

.gridSet {
    width: 100%;
    font-size: 12pt;
    color: #1B315E;
}

.gridName {
    text-align: center;
    font-weight: bold;
}

table, th, td {
    border-collapse: collapse;
    border: 1px solid #1B315E;
}

table, th {
    background: #1B315E;
    text-align: center;
    color: #FFF;
    width: 50%;
}

table, tr {
    background: #BBB;
    color: #1B315E;
}

td {
    text-align: left;
    padding: 12px;
}

#tabs {
    width: 100%;
    height: 30px;
    overflow: hidden;
    background: #CCC;
    border-top: 2px solid #BBB;
}

#tabs > a {
    float: left;
    display: block;
    padding: 4px 4px;
    margin: 0 0 0 4px;
    text-align: center;
    text-decoration: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 10pt;
    color: #1B315E;
    text-transform: uppercase;
}

#tabs > a.current {
    background: #FFF;
    color: #1B315E;
}

#tabs > a:not(.current):hover {
    background: #FFF;
    opacity: 0.75;
    color: #1B315E;
}

#workspaceSide {
    height: 100%;
    min-width: 340px;
    top: 0;
    right: 0;
    float: right;
    overflow: hidden;
    background: #1B315E;
}

#tabsPanel {
    position: fixed;
    float: right;
    right: 0;
    bottom: 0;
    width: 336px;
    height: 30px;
    overflow: hidden;
    background: #CCC;
    border-top: 2px solid #BBB;
}

#tabsPanel > button {
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
    display: block;
    padding: 4px 8px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 10pt;
    color: #1B315E;
}

#tabsPanel > button.current {
    background: #FFF;
    color: #1B315E;
}

.infoPanel {
    width: 336px;
    height: calc(100vh - 32px);
    float: right;
    position: relative;
    right: 0;
    top: 0;
    overflow: hidden;
}

.infoPanel > iframe {
    width: 100%;
    height: calc(100vh - 32px);
    top: 0;
    right: 0;
}

<!DOCTYPE HTML>
<!--
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
    <title>Welcome &#8212; Summit</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"> <!-- Internal Stylesheet -->
    <script src="https://kit.fontawesome.com/1de2bd6ce5.js"></script> <!-- Font Awesome (PRO) -->
    </head>
    
    <body>
    <div id="wrapper">
        
        <!-- Navigation (Side) -->
        <div id="navigation">
        <div class="buffer"></div>
        <a href="#" class="current" title="Home Workspace"><i class="fal fa-home"></i></a> <!-- Home Workspace -->
        <a href="#" title="Learning Workspace"><i class="fal fa-chalkboard"></i></a> <!-- Learning Workspace -->
        <a href="#" title="Student Management Workspace"><i class="fal fa-user"></i></a> <!-- Student Management Workspace -->
        <a href="#" title="Administration Workspace"><i class="fal fa-cog"></i></a> <!-- Administration Workspace -->
        <div class="navLinks">
        <button title="Quick Links"><i class="fal fa-bookmark"></i></button> <!-- Quick Links -->
        <button title="Sign Out"><i class="fal fa-sign-out-alt"></i></button> <!-- Sign Out -->
        </div>
        </div>
        
        <!-- Workspace (Main) -->
        <div id="workspaceMain">
            
            <!-- Name of Page -->
            <div id="pagename"><i class="fal fa-door-open"></i> Welcome</div>
            
            <!-- Toolbar -->
            <div id="toolbar">
            <button class="toolLinks" title="Save Changes"><i class="fal fa-save"></i> Save</button> <!-- Save -->
            <button class="toolLinks" title="Print This Page"><i class="fal fa-print"></i> Print</button> <!-- Print -->
            </div>
            
            <!-- Main Content -->
            <div id="content">
                
                <!-- Weekly Outline (Table) -->
                <h3 class="mainHeader" contenteditable="true">School</h3>
                <table class="gridSet">
                <caption class="gridName" contenteditable="true">Weekly Outline</caption>
                
                <tr><th>Date</th><th>Outline</th></tr> <!-- Column Categories -->
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                
                </table>
            
            </div>
        
            <!-- Navigation (Bottom) -->
            <div id="tabs">
            <a href="#" title="Notices"><i class="fal fa-newspaper"></i> Notices</a> <!-- Notices -->
            <a href="#" title="Dashboard"><i class="fal fa-chart-line"></i> Dashboard</a> <!-- Dashboard -->
            <a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> Timetable</a> <!-- Timetable -->
            <a href="#" class="current" title="Welcome"><i class="fal fa-door-open"></i> Welcome</a> <!-- Welcome -->
            </div>
            
        </div>
        
        <!-- Workspace (Side) -->
        <div id="workspaceSide">
        
            <!-- Panel Tabs (Bottom) -->
            <div id="tabsPanel">
            <button class="current" title="Summit News"><i class="fal fa-newspaper"></i></button> <!-- Summit News -->
            </div>
            
            <!-- Panel Content (News Only - Amend CSS and JS when other Tabs are added to the Bottom Panel Navigation) -->
            <div class="infoPanel"></div> <!-- Summit News iFrame (used to update across all pages automatically) -->
        
        </div>
        
        </div>
    </body>    
</html>