文章/答案/技术大牛

发布

社区首页 >问答首页 >我可以在css中将我的html body类定义为.body吗？

问我可以在css中将我的html body类定义为.body吗？
EN

Stack Overflow用户

提问于 2022-02-11 04:14:52

回答 2查看 549关注 0票数 0

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>

当我看到这一点时，.body类的大小就会产生和调整。我在尝试打开/关闭完整UI的地方添加了一个#容器id类。目前UI完成了它的工作，唯一的问题是.body类的大小一直在调整。希望大小保持在目前的设置，400%，400%，或仅仅适合全屏视图。任何帮助都是非常感谢的，谢谢。

html

css

回答 2

Stack Overflow用户

发布于 2022-02-11 04:18:36

因为你的html是无效的。所有的HTML元素都必须是body的子元素，但是<div id="container">是body的父元素，请将它移动到body中。

尝试这段代码

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

票数 1

Stack Overflow用户

发布于 2022-02-11 04:20:53

<div>不能在<body>之外。主体标记首先需要，然后是Div，所有的HTML元素都应该在<body>中。试着把身高定得像-

HTML, 
body {
    height: 100%;
}

或者-

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

堆栈溢出的原始答案- Make body have 100% of the browser height

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71075259

复制

相似问题

问我可以在css中将我的html body类定义为.body吗？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在css中将我的html body类定义为.body吗？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在css中将我的html body类定义为.body吗？
EN