我有这个小问题。我不能让我的网站在不同的分辨率上工作。例如，在小屏幕上它工作得很好，但是在更大的分辨率下，页眉和页脚会卡在其他容器下。
HTML：
<html>
<head>
<title>Grožio salonas „Emili”</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Kontaktai</h3>
<ul class="nav masthead-nav">
<li>
<a href="index.html">Pagrindinis</a>
</li>
<li>
<a href="paslaugos.html">Paslaugos</a>
</li>
<li>
<a href="galerija.html">Galerija</a>
</li>
<li class="active">
<a href="#">Kontaktai</a>
</li>
</ul>
</div>
</div>
<button class="accordion">Kontaktai</button>
<div class="panel">
<ul style="list-style-type:none; text-align: center; margin-left: -35px;">
<p style="font-size: 15px; font-weight: bold;">Grožio salono „Emili“ kolektyvas</p>
</div>
<button class="accordion">Kaip mus rasti?</button>
<div class="panel">
<p style="font-size: 15px; font-weight: bold; text-align: center;">Mus galite rasti adresu: Vytauto g. 12, Vilkaviškis</p>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 54.647634, lng: 23.037987};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2vbKp8wma2ImSg7SbFQXwRQh4DMhPQD4&callback=initMap">
</script>
</span>
</div>
<button class="accordion">Apie mus</button>
<div class="panel">
<center><img src="img/galerija/kolektyvas.jpg" alt="Emili kolektyvas" height="auto" width="100%"></center>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + 'px';
}
}
}
</script>
<!--
<span class="turinys">
<p class="pavadinimas">Kur mus rasti?</p>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 54.647634, lng: 23.037987};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2vbKp8wma2ImSg7SbFQXwRQh4DMhPQD4&callback=initMap">
</script>
</span>
-->
<div class="mastfoot">
<div class="inner">
<p>© 2017 Grožio salonas „Emili“ </p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS：
@font-face {
font-family: logo;
src: url(fonts/EdwardianScriptITC.ttf);
}
button.accordion {
border: 1px solid #ffffff;
border-radius: 30px 5px 0px 0px;
background-color: rgba(0,0,0,0.7);
color: #ffffff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
border: 1px solid #680606;
color: #ffffff;
outline: 5;
}
div.panel {
padding: 0 18px;
background-color: rgba(0,0,0,0.7);
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
h1 {
font-family: logo;
font-size: 900%;
color: #680606;
}
a,
a:focus,
a:hover {
color: #ffffff;
}
button{
border: 1px solid #ffffff;
background-color: rgba(0,0,0,0.7);
width: 150px;
height: 50px;
outline: 0;
}
button:hover{
border: 1px solid #680606;
color: #680606;
outline: 0;
}
/*
* Base structure
*/
html,
body {
/*css for full size background image*/
background: url(../img/backgroundsm.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #000;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#map {
text-align: center;
height: 300px;
width: 100%;
}
.pavadinimas{
margin-top: -100px;
text-align: center;
font-size: 30px;
}
.turinys{
text-align: left;
}
.uzsklanda{
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#menu_apie{
text-align: center;
font-size: 20px;
}
#puslapiai_apie{
width:auto;
margin:0 auto;
text-align:left;
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
text-align: left;
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
text-align: center;
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #ffffff;
color: rgba(255,255,255,.95);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
text-align: center;
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.modal-dialog {width:600px;}
.thumbnail {margin-bottom:6px;}
.galleria{ width: 100%; height: 450px; background: rgba(0,0,0,0.7); }
以下是问题的图片：
