使用98.css庫：
請注意，它以某種方式與框的右下角重疊。當我嘗試制作時width: 99%，它非常接近我想要的但不完全，并且它是左對齊的（而不是居中）。我試圖找出一個更優雅的解決方案來解決這個問題；有什么建議么？我也對任何可以一起運行的 CSS 框架持開放態度，98.css以使樣式更容易。謝謝！
...
<style>
html, body {
margin:0px;
background: #c0c0c0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.relative-position {
position: relative;
width: auto;
}
.bottom {
position: absolute;
bottom: 0;
padding-bottom: 4px;
}
.width-stretch {
width: 100%;
}
</style>
</head>
<body>
<!-- MAIN -->
<div class="center">
<div class="window relative-position" style="width: 95%; height: 95vh;">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar bottom width-stretch">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您可以使用flex-direction:columnon .window， with flex:1on ，.window-body以便它填充所有可用的垂直空間。
html,
body {
margin: 0px;
background: #c0c0c0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.window {
display: flex;
flex-direction: column;
}
.window-body {
flex: 1;
}<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="center">
<div class="window " style="width: 95%; height: 95vh;">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
將這些樣式添加到樣式標簽的內部。
.status-bar {
display: flex;
}
.status-bar-field {
flex: 1;
padding: 0 10px;
border: 1px solid black;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/490291.html