邊緣在寬度100％高度100％的div與寬度100％高度100％

我建立一個視頻作爲背景的網站。我希望所有的div都能夠集中和響應，這就是爲什麼我使用寬度和高度100％。然後我有一個覆蓋div，使用jquery淡入和淡出。我的問題是，我似乎無法得到這個div後，它已淡入英寸均勻的餘量。div我想保證金有id「信息」。邊緣在寬度100％高度100％的div與寬度100％高度100％

我的HTML看起來像這樣：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <meta name="description" content=""/> 
     <meta name="keywords"content=""/> 
     <title></title> 
     <link href="css/main.css" rel="stylesheet" type="text/css"/> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script> 
$(document).ready(function(){ 
    $("#btn").click(function(){ 
    $("#info").fadeToggle("slow"); 
    }); 
}); 
</script> 
    </head> 
    <header> 
     <div id="nav"> 
      <p><a id="btn" href="#">+</a></p> 
     </div> 
    </header> 
    <body> 
     <div id="container"> 
      <div id="info"> 
      </div> 
     </div> 
    </body> 
    <video id="video_background" src="vid/147000037.mp4" autoplay> 
</html>

和我的CSS：

* { 
    margin: 0; 
    padding: 0; 
} 


body { 
    font-family: "HelveticaNeue-UltraLight","HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif; 

} 

header { 
    z-index: 999; 
    display: block; 
    height: auto; 
    width: 100%; 
    position: fixed; 
} 

header a { 
    text-decoration: none; 
    font-size: 1.8em; 
    color: #000000; 
} 

#nav { 
    position: relative; 
    float: right; 
    top: 15px; 
    right: 20px; 
    color: #000000; 
} 


#container { 
    height: 100%; 
    width: 100%; 
    display: block; 
} 

#video_background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1000; 
} 

#info { 
    height: 100%; 
    width: 100%; 
    background: rgba(255,255,255,0.97); 
    z-index: 900; 
    display: none; 
    position: fixed; 
    margin: 10px; 
    vertical-align: center; 
}

來源

2013-04-12 user2273444

由於您的信息框有固定的定位，你可以省略你的CSS高度/寬度和利潤率，並使用偏移創建一個具有良好餘量的響應式容器。只要改變你的#info CSS以下幾點：

#info { 
    /* omit height & width */ 
    background: #bada55; /* Just because white on white is tough to see */ 
    z-index: 900; 
    display: none; 
    position: fixed; 
    /* omit margin and use according offsets */ 
    top:15px;left:15px;right:15px;bottom:15px; 
    vertical-align: center; 
}

看到它working here。

來源

2013-04-12 10:31:44 Christoph

工作就像一個魅力。謝謝你克里斯托弗！ – user2273444

@ user2273444爲什麼你不接受這個答案是正確的？這是一種在S.O上說「謝謝」的方式。 –

邊緣在寬度100％高度100％的div與寬度100％高度100％

回答

相關問題