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

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>
  <div id="container">
    <body >
      <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 >
        <button >Non-Serious</button>
        <div >
          <a href="#">10-1 Unable to Copy / Weak Signal</a>

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.

CodePudding user response：

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.

CodePudding user response：

<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