Question

我有一个jumbotron，我希望它有100％的高度，为此我使用绝对位置，但当我使用我的背景消失。我该怎么做才能解决这个问题。我尝试了很多我在不同网站上阅读的内容，但没有这些内容有效。先谢谢你 HTML

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

CSS

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;
}

Answer 1

因为您对子元素使用了绝对位置，所以您的父元素（BODY）不再具有高度，这是由.jumbotron.map（定位静态）之前给出的。只需添加高度：100％;到你的身体标签：）。

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

1 个答案: