我想从Windows 10计算器创建一个图层，但是在高度和宽度上存在一些问题。
任何帮助将不胜感激。
问题：
当我拉高结果的顶部或增加浏览器的高度时，计算器会上升，并且计算器的底部会出现一个很大的空间，我不知道为什么。
当我减小窗口的宽度而不是减小按钮的宽度时，计算器会右移，某些按钮将不会显示。
当我减小窗口的高度时，它不会在任何位置停止，但我想将其停止在500 px的高度；
这是我的代码。
html ：
<!DOCTYPE html>
<html>
<head>
<link href="./calculator.css" rel="stylesheet" type="text/css">
<title>Windows10 Calculator</title>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div class="container">
<div class="calculator-container">
<div class="top-navbar">
<p id="calculator">
Calculator
</p>
<div class="close-bar">
<a id="minimize">-</a>
<a id="maximize">?</a>
<a id="close">x</a>
</div>
</div>
<div class="calculator-screen">
<div class="top-screen">
<a id="calculator-menu">≡</a>
<p id="standard">
Standard
</p>
</div>
<div class="result"><span id="result">4</span></div>
<div class="m-row">
<a id="MC">MC</a>
<a id="MR">MR</a>
<a id="Mplus">M+</a>
<a id="Mminus">M-</a>
<a id="MS">MS</a>
</div>
</div>
<hr />
<div class="functions">
<div class="row">
<a class="hide-in-big blue">%</a>
<a class="hide-in-big blue">√</a>
<a class="lucida-font hide-in-big blue"><p>
x<sup>2</sup>
</p></a>
<a class="lucida-font hide-in-big blue"><p><sup>1</sup>∕<sub>x</sub></p></a>
</div>
<div class="row">
<a class="show-in-big blue">%</a>
<a class="cs blue">CE</a>
<a class="cs blue">C</a>
<a class="blue"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABDklEQVRYR+2W4Q3CIBSErxu4iY6gm+hmbqIj6CZuUHNJMeQFeAelaUzoT8LjPo570Ak7f9PO+hgAw4G/cuAA4AHg1KFzfhtXHegpTv4qgFj8DeAM4NPowrzUyQA9xaldBaCIc451IzUWDJMBFPE7gCOASwQR6l4AboljkgAUcc55LgAUIwS/0CW5rLgAinjYmIXgOFu0FNQiQI14CoJjXpe4ANZWr93s/RCOI1cnHYEKYR2jAwxlCcIF4CKpgKVazQaOtR68BKBCsA0ZuvhmDPB04drahrmUx/0ez9nkIqqBqHkW5COIF1UyoUI0AdhMqGKlefJrmHNiLUQTwFrRZL36R7SJOBcdAMOB3R34AqM1YCEu+sgCAAAAAElFTkSuQmCC" /></a>
<a class="hover-blue blue">\[\div\]</a>
</div>
</div>
<div class="numpad">
<div class="row">
<a class="lucida-font show-in-big blue">√</a>
<a class="number">7</a>
<a class="number">8</a>
<a class="number">9</a>
<a class="hover-blue blue">×</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p>
x<sup>2</sup>
</p>
<a class="number">4</a>
<a class="number">5</a>
<a class="number">6</a>
<a class="hover-blue blue">-</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p>
x<sup>3</sup>
</p></a>
<a class="number">1</a>
<a class="number">2</a>
<a class="number">3</a>
<a class="hover-blue blue">+</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p><sup>1</sup>∕<sub>x</sub></p></a>
<a class="blue">±</a>
<a class="number">0</a>
<a class="blue">∙</a>
<a class="hover-blue blue">=</a>
</div>
</div>
</div>
<div class="history-memory">
<div>
<div class="hidden-close-bar">
<a id="minimize">ー</a>
<a id="maximize">?</a>
<a id="close">྾</a>
</div>
<div class="history-memory-bar">
<a id="history">History</a>
<a id="memory">Memory</a>
</div>
</div>
<div class="history-memory-screen">
<span class="grey"> 2×2=</span>
<span class="black">4</span>
<span class="grey">9999+1=</span>
<span class="black">10000</span>
</div>
</div>
</div>
</body>
CSS ：
@font-face{
src:
url("//db.onlinewebfonts.com/t/efbd8f0d869bf61fbe0f139a1602cda8.woff2");
font-family:"lucida calligraphy";
}
body{
min-width: 500px;
width: auto !important;
margin: 0 !important;
overflow: hidden;
font-family: Segoe UI;
}
.close-bar, .hidden-close-bar{
margin-right: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.container{
min-width: 800px;
min-height: 800px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
overflow-y: hidden;
background-color: #E6E6E6;
}
.calculator-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between !important;
}
.top-navbar{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.top-navbar p {
margin-left: 10px;
}
.top-screen a{
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.top-screen p{
display: flex;
align-items: center;
justify-content: center;
}
.calculator-screen{
display: flex;
flex-direction: column;
}
.top-screen{
display: flex;
flex-direction: row;
}
.top-screen * {
margin: 1%;
font-size: 2em;
}
.result{
height: 15vh;
display: flex;
justify-content: flex-end;
font-size: 4em;
font-family: Segoe UI;
font-weight: bold;
}
.row{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: bottom
}
.cs{
font-size: 1.5em !important;
}
.m-row{
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.m-row a{
margin-left: 7%;
cursor: pointer;
}
#standard{
font-size: 1.5em;
margin-left: 3%;
}
.row a {
width: 25%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
margin: 1px;
cursor: pointer;
font-size: 2em;
}
.row a:hover{
background-color: #B1B2B5;
}
.blue{
background-color: #F0F0F0;
font-weight: 300;
}
.number{
background-color: #FAFAFA;
font-weight: bold;
font-size: 1.5em !important;
}
.history-memory{
display: none;
}
.history-memory a {
cursor: pointer;
font-size: 1.5em;
}
.row .hide-in-big{
display: flex;
justify-content: center;
align-items: center;
}
.row .show-in-big{
display: none;
}
.hidden-close-bar{
display: none;
}
.close-bar {
margin: 1px;
}
#history {
border-bottom: 2px solid #0097A7;
margin-right: 10%;
}
#trash-can {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 10px;
background-color: #aad3ef;
cursor: default;
}
#trash-can img {
width: 15%;
cursor: pointer;
background-color: #aad3ef;
}
.history-memory-screen{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 10%;
height: 100%;
}
.history-memory-bar{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.grey{
align-self: flex-end;
color: #616161;
margin: 5px;
margin-right: 5px;
}
.black{
align-self: flex-end;
justify-self: flex-end;
margin: 5px;
margin-right: 5px;
}
.lucida-font{
font-family:"lucida calligraphy" !important;
font-size: 1em !important;
font-weight: bold !important;
}
.hover-blue:hover{
background-color: #1C87DB !important;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 800px){
.calculator-container{
width: 100%;
height: 100%
}
.row .show-in-big{
display: none;
}
.row .hide-in-big {
display: flex;
justify-content: center;
align-items: center;
}
}
@media screen and (min-width:800px){
.history-memory{
display: flex;
width: 40%;
flex-direction: column;
justify-content: space-between;
}
.hidden-close-bar{
display: block;
text-align: right;
}
.hidden-close-bar a{
margin: 1px;
}
.close-bar {
display: none;
}
}
@media screen and (min-width: 1000px){
.row .hide-in-big{
display: none;
}
.row .show-in-big {
display: flex;
justify-content: center;
align-items: center;
}
}
和this is到我的代码jsfiddle的链接
答案 0 :(得分：0)
问题编号1：，由于您使用min-height，因此应定义括号中的height。在您的情况下为body，因此可以解决第一个问题：
body{
/* other stuff */
height: 100vh; /* or whatever px, em, etc., except % */
}
问题编号2：据我了解，“ M”按钮出现了问题，因为所有其他按钮似乎都已正确调整大小...因此，如果您将max-width添加到.m-row a可以防止溢出。您也可以像在其他其他按钮上一样在font-size中添加vw，尽管我不会这样做，因为所有文本在一个小窗口中都不可读。
.m-row a{
margin-left: 7%;
max-width: 13%; /* because you have 5 buttons (each 20%) - 7% of your margin-left*/
}
问题编号3：您可以使用some javascript and control it's size with window.resizeTo打开一个具有指定尺寸的新窗口。但是，我认为某些浏览器不允许这样做。因此，我只需将min-width，min-height添加overflow: auto添加到父项（在您的情况下为正文）中即可。
希望对您有帮助。