Body styling stops at one screen for no apparent reason

Question

The styling I have on the body element stops exactly where my computer "first screen" stops. There doesn't seem to be a code related reason for it:

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

I don't believe the HTML has anything that would cause the body CSS to stop:

        <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>

Does anyone know what's going on to cause this?

Update

As requested in the comments here is the full 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>

What's the expected output? What exactly isn't running properly? **"...where my computer 'first screen' stops"** is a bit vague — Rojo, Nov 12 '19 at 21:10
I should see the green border and brown background's bottom edges continue to the bottom of the page. Right now it stops exactly where my screen ends before I scroll down — Sean D, Nov 12 '19 at 21:11
Are any of the children elements floated or anything like that? That could cause the parent element to not expand as you expect it to. Show us a little more of your CSS. — elke_wtf, Nov 12 '19 at 21:13
@ChrisW. I tried that line with and without `!important` but it doesn't fix it unfortunately. @plumwd, no floats. I am copying the full CSS to the top post — Sean D, Nov 12 '19 at 21:22
inspect the element that is cut off. Start unchecking boxes in the inspector and see what is causing it — epascarello, Nov 12 '19 at 21:25
you need to remove the line shown by @ChrisW. it's the culprit. it is restricting the body to 100% of screen height — Temani Afif, Nov 12 '19 at 21:29
don't answer the question inside the quesiton and the duplicate explain perfectly the issue you are having with your height:100% and is giving you an alternative instead of simply removing them — Temani Afif, Nov 12 '19 at 21:42
@TemaniAfif the conflicting library import is core to the problem, the thread you linked to only explains half the issue. I believe this post has been mishandled and am flagging it for review by an administrator. — Sean D, Nov 13 '19 at 06:49

James Allen · Answer 1 · 2019-11-12T21:42:59.553

0

Change

html, body { height: 100%; }

to

body { min-height: 100vh; }

edited Nov 12 '19 at 21:42

answered Nov 12 '19 at 21:29

James Allen

969
4
16

1

when dealing with `vh` the body should be enough in the selector – Temani Afif Nov 12 '19 at 21:32
updated...even though there's seems to be no detriment to including it... – James Allen Nov 12 '19 at 21:43

score 0 · Answer 2 · answered Nov 13 '19 at 09:41

Following the advice of @epascarello I unchecked every box on the inspected element and traced the issue back to 2 things

The height : 100%; I recently added on html, body.
Another height : 100% which made its way in through a library (shopify/polaris)

Removing both of those fixed the issue.

Body styling stops at one screen for no apparent reason

2 Answers2