Can I define my html body class as .body in css?

Question

CSS

.body {
    background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff);
  background-size: 400% 400%;
  background-repeat:no-repeat;
    animation: gradient 35s ease infinite;
    height: 100vh;
}

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
<body class="body">
<div id="container">
      <title>Police 10 Codes</title>
      <h1>LSPD Ten Codes</h1>
      <img src="https://i.ibb.co/2vNZgd9/lspd-removebg-preview.png" alt="LSPD Image"style="width:150px;height:150px;">
      <div class="dropdown">
        <button class="dropbtn">Non-Serious</button>
        <div class="dropdown-content">
          <a href="#">10-1 Unable to Copy / Weak Signal</a>
          <a href="#">10-3 Stop Transmitting</a>
          <a href="#">10-4 Affirmative / Understood</a>
          <a href="#">10-7 Out of Service</a>
          <a href="#">10-8 In Service</a>
          <a href="#">10-12 Stand by</a>
          <a href="#">10-17 En-route to Scene</a>
          <a href="#">10-19 Return to Station/Location</a>
          <a href="#">10-20 Location</a>
          <a href="#">10-22 Disregard</a>
          <a href="#">10-23 Arrived at Scene</a>
          <a href="#">10-24 Assignment Complete</a>
          <a href="#">10-30 Traffic Stop</a>
          <a href="#">10-36 Correct Time</a>
          <a href="#">10-37 Suspicious Vehicle</a>
          <a href="#">10-40 Run Silent No Lights/Siren</a>
          <a href="#">10-53 Road Blocked</a>
          <a href="#">10-56 Intoxicated Pedestrian</a>
          <a href="#">10-58 Direct Traffic</a>
          <a href="#">10-59 Convoy / Escort</a>
          <a href="#">10-60 In the Area</a>
          <a href="#">10-61 Clear for Radio Traffic</a>
          <a href="#">10-74 Negative</a>
          <a href="#">10-77 ETA</a>
          <a href="#">10-68 Dispatch Information</a>
          <a href="#">10-92 Improper parking</a>
        </div>
      </div>
      <div class="dropdown2">
        <button class="dropbtn2">Medium</button>
        <div class="dropdown2-content">
          <a href="#">10-0 Use Caution</a>
          <a href="#">10-10 Fight in Progress</a>
          <a href="#">10-25 Report in person</a>
          <a href="#">10-26 Detaining/Arresting Subject</a>
          <a href="#">10-29 Warrant Check</a>
          <a href="#">10-31 Crime in progress</a>
          <a href="#">10-50 Traffic Crash</a>
          <a href="#">10-55 DUI</a>
          <a href="#">10-57 Hit & Run</a>
          <a href="#">10-78 Requesting backup</a>
          <a href="#">10-80 Fire Alarm</a>
          <a href="#">10-94 Street Racing</a>
          <a href="#">10-96 Mental Patient</a>
        </div>
      </div>
      <div class="dropdown3">
        <button class="dropbtn3">Serious</button>
        <div class="dropdown3-content">
          <a href="#">10-18 Urgent</a>
          <a href="#">10-32 Person with Gun</a>
          <a href="#">10-39 Run with Lights/Siren</a>
          <a href="#">10-67 Report of Death</a>
          <a href="#">10-80 Pursuit in Progress</a>
          <a href="#">10-82 Fire in Progress</a>
          <a href="#">10-89 Bomb Threat</a>
          <a href="#">10-90 Bank Alarm</a>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

When I view this, the size of the .body class crops and adjusts. I have a #container id class added where I'm trying to have the full UI open/close. Currently the UI does it's job, only issue I'm having is the size of the .body class keeps adjusting. Would like the size to stay at what its currently set at, 400% 400% or just fit for full screen view. Any help is appreciated, thank you.

ruleboy21 · Answer 1 · 2022-02-11T22:00:42.950

It's because your html is invalid. All HTML elements must be children of the body but you have <div id="container"> as the body's parent. Kindly move it inside the body.

Try this code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LSPD Ten Codes</title>
    <link rel="stylesheet" href="style.css">
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <script src="./listener.js" type="text/javascript"></script>
    <style type="text/css">
        .body {
            background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff);
            background-size: 400% 400%;
            background-repeat:no-repeat;
            animation: gradient 35s ease infinite;
            height: 100vh;
        }
    </style>
</head>
<body class="body">
    <div id="container">
      <title>Police 10 Codes</title>
      <h1>LSPD Ten Codes</h1>
      <img src="https://i.ibb.co/2vNZgd9/lspd-removebg-preview.png" alt="LSPD Image"style="width:150px;height:150px;">
      <div class="dropdown">
        <button class="dropbtn">Non-Serious</button>
        <div class="dropdown-content">
          <a href="#">10-1 Unable to Copy / Weak Signal</a>
          <a href="#">10-3 Stop Transmitting</a>
          <a href="#">10-4 Affirmative / Understood</a>
          <a href="#">10-7 Out of Service</a>
          <a href="#">10-8 In Service</a>
          <a href="#">10-12 Stand by</a>
          <a href="#">10-17 En-route to Scene</a>
          <a href="#">10-19 Return to Station/Location</a>
          <a href="#">10-20 Location</a>
          <a href="#">10-22 Disregard</a>
          <a href="#">10-23 Arrived at Scene</a>
          <a href="#">10-24 Assignment Complete</a>
          <a href="#">10-30 Traffic Stop</a>
          <a href="#">10-36 Correct Time</a>
          <a href="#">10-37 Suspicious Vehicle</a>
          <a href="#">10-40 Run Silent No Lights/Siren</a>
          <a href="#">10-53 Road Blocked</a>
          <a href="#">10-56 Intoxicated Pedestrian</a>
          <a href="#">10-58 Direct Traffic</a>
          <a href="#">10-59 Convoy / Escort</a>
          <a href="#">10-60 In the Area</a>
          <a href="#">10-61 Clear for Radio Traffic</a>
          <a href="#">10-74 Negative</a>
          <a href="#">10-77 ETA</a>
          <a href="#">10-68 Dispatch Information</a>
          <a href="#">10-92 Improper parking</a>
        </div>
      </div>
      <div class="dropdown2">
        <button class="dropbtn2">Medium</button>
        <div class="dropdown2-content">
          <a href="#">10-0 Use Caution</a>
          <a href="#">10-10 Fight in Progress</a>
          <a href="#">10-25 Report in person</a>
          <a href="#">10-26 Detaining/Arresting Subject</a>
          <a href="#">10-29 Warrant Check</a>
          <a href="#">10-31 Crime in progress</a>
          <a href="#">10-50 Traffic Crash</a>
          <a href="#">10-55 DUI</a>
          <a href="#">10-57 Hit & Run</a>
          <a href="#">10-78 Requesting backup</a>
          <a href="#">10-80 Fire Alarm</a>
          <a href="#">10-94 Street Racing</a>
          <a href="#">10-96 Mental Patient</a>
        </div>
      </div>
      <div class="dropdown3">
        <button class="dropbtn3">Serious</button>
        <div class="dropdown3-content">
          <a href="#">10-18 Urgent</a>
          <a href="#">10-32 Person with Gun</a>
          <a href="#">10-39 Run with Lights/Siren</a>
          <a href="#">10-67 Report of Death</a>
          <a href="#">10-80 Pursuit in Progress</a>
          <a href="#">10-82 Fire in Progress</a>
          <a href="#">10-89 Bomb Threat</a>
          <a href="#">10-90 Bank Alarm</a>
        </div>
      </div>
    </div>
</body>
</html>

Thanks for the reply! I've went ahead and moved `
` inside of the body class but the size of the .body class still seems to be getting cropped and adjusted. Not sure what could be affecting this. I've tried to have the .body class background-size: contain; to keep the size full screen but even then the .body class size still crops. — THC, Feb 11 '22 at 06:08
Kindly add the full HTML code to your question so that we can figure out what exactly is wrong. — ruleboy21, Feb 11 '22 at 08:03
I've went ahead and updated the question with the full HTML code. — THC, Feb 11 '22 at 21:52
Thank you for the suggestion. Tried what you sent, No more cropping/size adjusting, now opening the UI works fine, (full display everything works etc.) when closing UI, the .body class and scrollbar still display. — THC, Feb 11 '22 at 22:12
https://jsfiddle.net/#&togetherjs=93y64Kq9O0 uploaded full script here besides the LUA code I'm using, If needed, can display LUA also. — THC, Feb 11 '22 at 22:23
@THC I've check the fiddle, everything looks great. But first, add the javascript in the `listener.js` file to the fiddle. Lastly, try and explain this part to me properly _"when closing UI, the .body class and scrollbar still display"_ — ruleboy21, Feb 11 '22 at 22:36
Does the Javascript code not display in Fiddle? I'm making a FiveM UI to display Police 10 Codes, when I use example `/10CodesOn` to display the UI, the script works perfect no issues, when I do example `/10CodesOff` to turn off the UI display, everything in html closes besides the scrollbar I've added and the .body class (red, white, blue background design) both the scrollbar and .body (background) stay displaying on screen after example `10CodesOff` is used. — THC, Feb 11 '22 at 22:48

Avi · Answer 2 · 2022-02-11T09:15:38.277

1

<div> cannot be outside of <body>. Body tag needs to come first, then the Div, All HTML elements should be inside <body>. Try setting body height like -

HTML, 
body {
    height: 100%;
}

OR -

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Orignal answer at stackoverflow - Make body have 100% of the browser height

edited Feb 11 '22 at 09:15

answered Feb 11 '22 at 04:20

Avi

31
7

Thanks for the reply! I've went ahead and moved `
` inside of the body class but the size of the .body class still seems to be getting cropped and adjusted. Not sure what could be affecting this. I've tried to have the .body class background-size: contain; to keep the size full screen but even then the .body class size still crops.
– THC Feb 11 '22 at 06:08
@THC I edited the answer, can you try it now. – Avi Feb 11 '22 at 09:16
Thanks for the suggestion, Tried both, didn't seem to fix the issue for the cropping/size adjusting on the `.body` class. Only notice I saw trying your suggestion was the scrollbar stayed on screen while UI opened/closed. I notice in CSS, if I remove the `.` in `.body` I get the original full screen of how I'd like, but then the issue for that is when I Open/Close the UI, all other classes close besides the `body` class resulting in the background to stay on screen, but all other contents will close. – THC Feb 11 '22 at 21:44

Can I define my html body class as .body in css?

2 Answers2