最小高度或最小宽度或响应将不起作用答案

【问题标题】：min-height or min-width or responsive won't work最小高度或最小宽度或响应将不起作用
【发布时间】：2020-01-29 11:33:40
【问题描述】：

我想从 Windows 10 计算器创建一个图层，但其中的高度和宽度有一些问题。

任何帮助将不胜感激。

问题：

当我拉起结果顶部或增加浏览器高度时，计算器会上升，计算器底部会出现一个大空间，我不知道这是为什么。
当我减小窗口的宽度而不是减小按钮的宽度时，计算器会向右移动，并且某些按钮不会显示。
当我降低窗口高度时，它不会在任何地方停止，但我想将其停止在 500 像素高度；

这是我的代码。

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>&#8725;<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">&times;</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">&plus;</a>
                    </div>
                    <div class="row">
                        <a class="lucida-font show-in-big blue"><p><sup>1</sup>&#8725;<sub>x</sub></p></a>
                        <a class="blue">&plusmn;</a>
                        <a class="number">0</a>
                        <a class="blue">&#8729;</a>
                        <a class="hover-blue blue">&equals;</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&#215;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链接

【问题讨论】：

大多数人都不会费心阅读这样一段很长的代码并把它全部解决。最好的办法是以尽可能最小的方式重现相同的问题，并将其作为堆栈溢出嵌入发布。
@dwjohnston 感谢您的建议，但我的主要问题是我不知道代码有什么问题

标签： html css

【解决方案1】：

问题 1： 因为您使用 min-height，您应该定义您的paren 的 height。在您的情况下，它是body，所以这将解决第一个问题：

body{
  /* other stuff */
  height: 100vh; /* or whatever px, em, etc., except % */
}

问题 2： 据我了解，问题出现在“M”按钮上，因为所有其他按钮的大小似乎都已正确调整...所以如果您将 max-width 添加到 @987654327 @它将防止溢出。您也可以像添加其他按钮一样在vw 中添加font-size，但我不会这样做，因为所有文本都在一个小窗口中变得不可读。

.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 add overflow: auto 添加到父级（在您的情况下为正文）。

希望对你有帮助。

【讨论】：