Всплывающее окно с полным экраном (CSS + HTML)

Question

У меня возникли проблемы с созданием полноэкранного всплывающего окна для сайта, над которым я работаю. макет должен выглядеть следующим образом:

Голова и колонтитул оба должны быть фиксированной высоты, с высоты тела расширяется и сжимается в зависимости от высоты окна браузера.

Как это сделать?

Редактировать: Я забыл упомянуть, что средняя часть должна иметь переполнение: прокрутка для содержимого, которое больше высоты страницы.

Answer 1

Попробуйте этот простой вариант http://jsfiddle.net/jaisonje/mRBJj/ и увидеть Scroll Bar sample here

HTML:

<div class="header">Header</div> 
<div class="content">Content</div> 
<div class="footer">Footer</div> 

CSS:

body, html { height:100%; } 
.footer,.header{ position:absolute; top:0; height:50px; background-color:yellow; width:100%;} 
.content{ position:absolute; top:50px; bottom:50px; background-color:red;width:100%;} 
.footer{ bottom:0; top:auto;} 

Answer 2

Скачать На этом сайте Bootstrap.css

http://twitter.github.io/bootstrap/index.html 

CSS:

.modal { 
     background-clip: padding-box; 
     background-color: #FFFFFF; 
     border: 1px solid rgba(0, 0, 0, 0.3); 
     border-radius: 6px 6px 6px 6px; 
     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     left: 21.5%; 
     margin-left: -280px; 
     outline: medium none; 
     position: fixed; 
     top: 2%; 
     width: 98%; 
     z-index: 1050; 
    } 
    .modal-footer { 
     background-color: #F5F5F5; 
     border-radius: 0 0 6px 6px; 
     border-top: 1px solid #DDDDDD; 
     box-shadow: 0 1px 0 #FFFFFF inset; 
     margin-bottom: 0; 
     padding: 14px 15px 15px; 
     text-align: left; 
    } 

HTML:

<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
<h3 id="myModalLabel">Modal header</h3> 
</div> 
<div class="modal-body"> 
<p>Modal body…</p> 
</div> 
<div class="modal-footer"> 
Modal Footer 

</div> 
</div> 

SCRIPT: Скачать Javascript на начальной загрузки сайта http://twitter.github.io/bootstrap/index.html

<script type="text/javascript" src="bootstrap.min.js"></script> 
<script type="text/javascript" src="jquery-1.7.js"></script> 

добавить этот скрипт на вашей странице

<script type="text/javascript"> 
$('#myModal').modal('show') 
</script> 

Answer 3

Вы можете сделать это с помощью box-sizing собственности.

Как так:

FIDDLE1FIDDLE2

.container 
{ 
    height: 100%; 
    background: pink; 
    margin: -64px 0; 
    padding: 64px 0; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.content { 
    overflow:auto; 
    height:100%; 
} 
header 
{ 
    height: 64px; 
    background: purple; 
    position: relative; 
    z-index:1; 
} 
footer 
{ 
    height: 64px; 
    background: gray; 
    position: relative; 
    z-index:1; 
}