Маржа на div с шириной 100% высота 100% внутри другого div с шириной 100% высота 100%

Я здание сайта с видео в качестве фона. Я хочу, чтобы все divs были центрированными и отзывчивыми, и именно поэтому я использую ширину и высоту 100%. Затем у меня есть оверлейный div, который исчезает и вызывается при нажатии с помощью jquery. Моя проблема заключается в том, что я не могу получить равномерную маржу вокруг этого div после того, как она исчезла. В div, на котором я хочу получить маржу, есть идентификатор «info».Маржа на div с шириной 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. –

Маржа на div с шириной 100% высота 100% внутри другого div с шириной 100% высота 100%

ответ

Смежные вопросы