html - 车身造型无缘无故停在一个屏幕上

问题描述

我在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 有任何会导致 body 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>

有谁知道这是怎么回事？

更新

正如评论中所要求的，这里是完整的 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>

标签： htmlcss

html - 车身造型无缘无故停在一个屏幕上

问题描述

解决方案

推荐阅读