TechQA.

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

1.3k views Asked by At

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.

html css tags document-body
Original Q&A
2

There are 2 answers

7
ruleboy21 On

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>

3
Avi On

<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

Related Questions in HTML

Related Questions in CSS

Related Questions in TAGS

Related Questions in DOCUMENT-BODY

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions