身体造型无缘无故停在一个屏幕上[重复]答案

【问题标题】：Body styling stops at one screen for no apparent reason [duplicate]身体造型无缘无故停在一个屏幕上[重复]
【发布时间】：2019-11-13 17:41:59
【问题描述】：

body 元素上的样式恰好在我的计算机“第一个屏幕”停止的位置停止。似乎没有代码相关的原因：

// Styled JSX react.js library:
 body {
        font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        background-color: wheat;
        border: 2px dashed green;
      }

我认为 HTML 中没有任何会导致正文 CSS 停止的内容：

        <label htmlFor="lowQuantityThreshold">
          Enter a stock amount at which this rule will activate an override percentage for any product not marked as an
          exclusion (or leave blank to disable this rule)
        </label>
        <input type="number" />

        <label htmlFor="minQuantityPercentage">

        </label>
      </section>

      <section>
        <h4>Individual Product Rules</h4>
        <p>Set a specific trade in price point and product ID here. Individual product rules override all global
           rules.</p>

有谁知道这是怎么回事？

更新

根据 cmets 的要求，这里是完整的 CSS：

<style jsx global>{`

      html, body { height : 100% !important; }

      body {  
        font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        background-color: wheat;
        border: 2px dashed green;
      }

      p, h1, h2, h3, h4, h5, h6 {
        font-family: Roboto, Helvetica, sans-serif;
        color: rgba(30, 30, 30, .9);
      }

      button {
        color : whitesmoke;
        padding-top: 4px;
        padding-bottom: 4px;
      }

      section {
        margin: 2vh 2vw;
        padding: 2vh 2vw;
        background-color: white;

        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        border-radius: 2px;
      }

      section > * {
        padding: 1vh .5vw;
      }

      h3 {
        font-size: calc(26px + (38 - 14) * ((100vw - 300px) / (1600 - 300)));
      }

      h4 {
        font-size: calc(18px + (28 - 14) * ((100vw - 300px) / (1600 - 300)));
      }

      h5 {
        font-size: calc(20px + (32 - 14) * ((100vw - 300px) / (1600 - 300)));
      }

      table * { text-align: center; }

      button {
        border: none;
        border-radius: 2vw;
        cursor: pointer;
        background-color: #5c6ac4;
      }

      input[type=text], input[type=number] {
        padding: 1vh 1vw;
        min-width: 200px;
        max-width: 400px;
      }

      .inputRow {
        display : grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(50px, 200px));
        justify-items: center;
        align-items: center;
        border: 2px dashed red;
      }

      .formEmulationGrid {
        display : grid;
        grid-gap : 1rem;
        grid-template-columns : repeat(auto-fill, minmax(200px, 1fr))
      }

    `}</style>

【问题讨论】：

预期输出是什么？究竟是什么运行不正常？ “...我的电脑'第一个屏幕'停止的地方”有点模糊
我应该看到绿色边框和棕色背景的底部边缘继续到页面底部。现在它会在我向下滚动之前准确地停在我的屏幕结束位置
是否有任何子元素浮动或类似的东西？这可能会导致父元素不会像您期望的那样扩展。向我们展示更多你的 CSS。
html, body { height: 100% }
检查被切断的元素。开始取消选中检查器中的复选框，看看是什么原因造成的

标签： html css

【解决方案1】：

改变

html, body { height: 100%; }

到

body { min-height: 100vh; }

【讨论】：

在处理vh时，选择器中的body应该足够了
已更新...即使包含它似乎没有什么害处...

【解决方案2】：

按照@epascarello 的建议，我取消选中检查元素上的每个框并将问题追溯到两件事

我最近在html, body 上添加了height : 100%;。
另一个 height : 100% 进入图书馆 (shopify/polaris)

删除这两个解决了问题。

【讨论】：