height:100vh; going beyond window height even though max-height was set to 100%

Question

I am trying to set up a gradient which covers the whole page

This is my code:

#login .row div:nth-of-type(1) {
     height: 100vh;
     max-height: 1%;
 
     background: #642B73;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #C6426E, #642B73);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 
 26+, Opera 12+, Safari 7+ */
 }

<div id="main">
  <div class="container-fluid" id="app">
   <div id="login">
            <div class="row">
                <div class="col-md"></div>
            </div>
        </div>
  </div>

(I know I have written max-height: 1%;, read on)

Now as I said height: 100%; wasn't working, so I tried using various inputs, what I saw was when I used pixels for max-height, there were changes to the height of the gradient but no matter what input I choose for max-height in percentage, height of the gradient would remain the same, for example here in my code I have used max-height: 1%; and the gradient is still going beyond the height of the webpage.

I checked in the dev-tools and the max-height property was getting applied, so I am confused what is up?

@vikAy Just did, didn't work, (checked dev-tools too, the style is getting applied there) — Palash Singh Raghuwanshi, Apr 02 '21 at 12:23
height or min-height behave the same using percentage and the rule is *the parent need to have an explicit height*.In your case it will be ignored — Temani Afif, Apr 02 '21 at 12:46

GucciBananaKing99 · Answer 1 · 2021-04-02T12:27:14.997

0

If you use this code then the margin and padding on the border will be removed and it should work as you want it to. Here is the code:

* {
  margin: 0;
  padding: 0;
}

#login .row div:nth-of-type(1) {
     height: 100vh;
     max-height: 1%;
 
     background: #642B73;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #C6426E, #642B73);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 
 26+, Opera 12+, Safari 7+ */
 }

<div id="main">
  <div class="container-fluid" id="app">
   <div id="login">
            <div class="row">
                <div class="col-md"></div>
            </div>
        </div>
  </div>

edited Apr 02 '21 at 12:27

answered Apr 02 '21 at 12:17

GucciBananaKing99

1,473
1
11
31

Answers which provide references and explain why or how code helps solve the OP's issue tend to be upvoted more often than those which simply provide code with phrases like "Try this". – Heretic Monkey Apr 02 '21 at 12:21
@HereticMonkey better? – GucciBananaKing99 Apr 02 '21 at 12:23
Not working :-( – Palash Singh Raghuwanshi Apr 02 '21 at 12:25
@PalashRaghuwanshi i updated the answer. Take a look at it. It's the full height and width – GucciBananaKing99 Apr 02 '21 at 12:27
@PalashRaghuwanshi isn't this what you wanted? – GucciBananaKing99 Apr 06 '21 at 10:22

score 0 · Answer 2 · answered Apr 02 '21 at 12:28

0

First of all you need a CSS reset to reset your default browsers styles, you can search about it by using these keywords css reset 2020. you will see several results. choose one of them and load those styles in the first loading of your page, for example use this reset.

Then for having full height support, use this global CSS:

html, body {
  height: 100%;
}

Then create a root wrapper for all of your page under body tag:

<body>
  <div id="root">

#root {
  height: 100%;
  background: #642B73;
  background: -webkit-linear-gradient(to right, #C6426E, #642B73);
  background: linear-gradient(to right, #C6426E, #642B73);
}

Please do not use vh, really it is annoying, specially in mobile chrome. in some cases browser cannot calculate height of page. specially in mobile. Hope it helps you.

answered Apr 02 '21 at 12:28

AmerllicA

29,059
15
130
154

Interesting, so I followed this answer exactly and I'm still getting the same amount of scroll, even after removing vh. – Palash Singh Raghuwanshi Apr 02 '21 at 12:45
@GucciBananaKing99, it is sample, pseudo code, not real – AmerllicA Apr 02 '21 at 12:47
@PalashRaghuwanshi, inspect the page. in the devTools, select tags one by one in `Elements` tab, and press delete button, you will found what causes scrolling issue. it is not related to my or GucciBananaKing99's answer. – AmerllicA Apr 02 '21 at 12:50
Thankyou, will do – Palash Singh Raghuwanshi Apr 02 '21 at 12:58

height:100vh; going beyond window height even though max-height was set to 100%

2 Answers2