Так что, если я вас правильно понимаю, что я не уверен, вы хотите всплывающее окно над макетом страницы, которое будет заполнять область просмотра и прокручивать, если содержимое становится слишком длинным?
ЕслиПравильно, тогда, возможно, что-то подобное поможет вам начать:
html,
body {
margin: 0;
}
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main,
.aside {
min-height: calc( 100vh - 100px );
}
.main {
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
.popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
@media all and (min-width: 600px) {
.aside { flex: 1 0; }
}
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="whatever.css" />
</head>
<body>
<!-- Bottom layer -->
<div class="wrapper">
<header class="header">
Header
</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">
Aside 1
</aside>
<aside class="aside aside-2">
Aside 2
</aside>
<footer class="footer">
Footer
</footer>
</div>
<!-- Popup -->
<div class="wrapper popup">
<header class="header">
Popup Header
</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">
Popup Aside 1
</aside>
<aside class="aside aside-2">
Popup Aside 2
</aside>
<footer class="footer">
Popup Footer
</footer>
</div>
</body>
</html>
Это основано на примере Криса Койера на этой странице , поэтому дизайн также отзывчивый.Все, что я сделал, это применил position: fixed к всплывающему окну, прикрепил его ко всем сторонам области просмотра и установил overflow: auto.Если вы хотите использовать position: absolute, тогда вы все равно можете использовать bottom: 0, top: 0, left: 0, right: 0, чтобы растянуть его, чтобы заполнить его контейнер.
Если вам нужны фиксированные высоты для верхнего и нижнего колонтитула, вы можете сделать это (как я использовалв приведенном выше примере):
.main, aside {
min-height: calc(100vh - 100px);
}