html - 缩小时页面上的项目不会填满页面
问题描述
当我在浏览器中缩小时,即使我将所有宽度都设置为 100% ,#workspaceMain
像#pagename
、和中的项目也不会填充屏幕空间的剩余部分。宽度已设置为 70% 以适应右侧的侧边栏。#toolbar
#content
#tabs
#workspaceMain
#workspaceMain
#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 — 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>
任何帮助表示赞赏。谢谢,汤姆
解决方案
flex
我已经编辑了你的 CSS 并使用CSS 的属性解决了你的问题。请比较你的 CSS 代码和这个新的,你会明白的。
使用display: flex;
or 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 — 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>
推荐阅读
- javascript - TypeError:分配给常量变量
- python - 如何获取 Post.user 的数据而不是登录用户
- data-structures - 这种情况会被归类为“不是很密集的图”吗?
- xamarin - 将具有跨度的子项添加到 C# 中的网格元素时超出范围
- curl - 纳斯达克数据
- python - 如何修复 FileNotFoundError [WinError 2]?
- python - PermissionError: [Errno 13] Permission denied - Python 无法写入/打开/读取任何文本或图像文件
- azure - B1 层应用服务计划可以拥有多少个子域?
- python - 如何在二维数组中使用 scipy 最小化?
- jquery - 如何使用 jquery 隐藏或显示 bootstrap 4 折叠