너비가 100 % 인 div의 여백 너비가 100 % 인 다른 div 안에 100 %

나는 비디오를 배경으로 사이트를 구축합니다. 모든 div가 중앙에 배치되고 반응이 좋기를 바랍니다. 그래서 너비와 높이를 100 % 사용하고 있습니다. 그런 다음 jquery를 사용하여 클릭시 페이드 인 및 페이드 아웃하는 오버레이 div가 있습니다. 내 문제는 그것이 페이드 인 후이 div 주위에 균일 한 여백을 얻을 수없는 것입니다. div에 원하는 마진은 ID가 "info"입니다.너비가 100 % 인 div의 여백 너비가 100 % 인 다른 div 안에 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 % 인 div의 여백 너비가 100 % 인 다른 div 안에 100 %

답변

관련 문제