Html 使用绝对位置时，我的背景消失_Html_Css

Html 使用绝对位置时，我的背景消失

html css

Html 使用绝对位置时，我的背景消失,html,css,Html,Css,我有一个巨型机器人，我希望它有100%的高度，为此我使用绝对位置，但当我使用我的背景消失。我能做些什么来解决这个问题。我在不同的网站上读了很多东西，但没有一个有用。提前谢谢你 HTML 因为正在对子元素使用绝对位置，所以父元素主体不再具有先前由.jumbotron.map positioned static给出的高度。加上身高：100%；到您的身体标签：。div要有100%的高度和100%的宽度，身体还需要有100%的高度和100%的宽度，这是一种不好的做法你可以考虑使用视口宽度和视口高度检

我有一个巨型机器人，我希望它有100%的高度，为此我使用绝对位置，但当我使用我的背景消失。我能做些什么来解决这个问题。我在不同的网站上读了很多东西，但没有一个有用。提前谢谢你 HTML

因为正在对子元素使用绝对位置，所以父元素主体不再具有先前由.jumbotron.map positioned static给出的高度。加上身高：100%；到您的身体标签：。

div要有100%的高度和100%的宽度，身体还需要有100%的高度和100%的宽度，这是一种不好的做法

<>你可以考虑使用视口宽度和视口高度

检查以下代码段

身体{ 保证金：0；填充：0；背景图像：重复线性梯度90度，FFFFFF，FFFFFF 18px，CA1D20 0px，CA1D20 28px； } /*传统*/ .jumbotron.map{ 宽度：60vw；高度：100vh；背景色：669900； }

可以添加代码段吗？只需将代码作为代码段运行，我看不出有任何问题。你确定吗？我在家试的时候也没问题jsfiddle@DekelEssam我刚刚在JSFIDLE上试用过，但它不起作用。有一辆绿色的巨型摩托车，没有background@YYahyaEssamEssam我刚刚在JSFIDLE上试用过，但它不起作用。有一个绿色的jumbotron，没有背景我只是复制了你的代码并尝试了一下。它起作用了。再试一次。回想起身高：100%；在车身上，tagi确实增加了100%的高度，但它不起作用。你能给我发代码吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Purgase Tracker - Track Santa!</title>

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

     <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


    <div class="body">
        <div class="container">
            <div class="jumbotron map">
                <div id="map"></div>
            </div>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

body { 
  margin: 0;
  padding: 0;
  background-image: repeating-linear-gradient( 
    90deg,
    #FFFFFF, 
    #FFFFFF 18px,
    #CA1D20 0px, 
    #CA1D20 28px 
    );
}
h1{
  font-size: 64px;
  text-align: center;
  color: #3498db;
  text-shadow: 3px 3px 0px #000;
}
h2{
  font-size: 32px;
  text-align: center;
  color: #3498db;
  text-shadow: 3px 3px 0px #000;
  margin: auto;
}
.jumbotron.timer{
  width: 58%;
  height: 280px;
  margin: auto;
  background-color: #669900;
}
.timertxt{
  color: #3498db;
  text-shadow: 3px 3px 0px #000;
  font-size: 64px;
  padding-left: 12px;
  padding-right: 12px;
  border: 2px solid #2980b9 ;
  border-radius: 5px;
  background-color: #2980b9;
  text-align: center;
}
.space{
  font-size: 12px;
  display: inline-block;
  float: left;
  visibility: hidden;
} 
.timertxtc{
  width: 25%;
  height: 120px;
  float: left;
  display: inline-block;
  box-sizing: border-box;
  padding-right: 4px;
  text-align: center;
}
.timertxtc:last-child{
  padding: 0;
}
h4{
  font-size: 32px;
  color: #3498db;
  text-shadow: 3px 3px 0px #000;
  display: inline-block;
  text-align: center;
}
/* TRADITIONS */
.jumbotron.map{
  width: 60%;
  height: 100%;
  position: absolute;
  margin: auto;
  background-color: #669900;
}