Question

我正在尝试创建一个<div>作为ajax加载。屏幕height位于100%时效果很好并且全屏适合，问题是当屏幕超过100%时，它不会自动调整。

我怎么能这样做？

尝试。

CSS

/** loading */
#div_loading  {    
    position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color:#000;
    width:100%;
    min-height:100%;
    height:auto;
    opacity: .50;
    filter: alpha(opacity=65);
    background-image: url(../Imagens/ajaxloader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
    display:none;    
}

修改

/** loading */
#div_loading  {    
    position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color:#000;
    width:100%;
    min-height:100vh;
    height:100vh;
    opacity: .50;
    filter: alpha(opacity=65);
    background-image: url(../Imagens/ajaxloader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
    display:none;    
}

Answer 1

首先你需要设置html，身高100％，然后你可以将你的div高度设置为100％。下面就是一个例子。

＆＃13;

#map {
    position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color:#000;
    width:100%;
    min-height:100%;
    height:100%
    height:auto;
    opacity: .50;
    filter: alpha(opacity=65);
    background-image: url(../Imagens/ajaxloader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;

}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    height: 100%;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

＆＃13;

如何创建<div>全屏？

1 个答案: