0
你好，我有一个下一个问题，如果内容超过窗口高度，我不希望我的页面高度拉伸，否则就是全屏。但现在看起来是这样的：制作页面获得全尺寸
这里是我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta content="width=1100" name="viewport">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script src="js/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script>
var previousPage;
$(document).ready(function() {
SwitchPage("home");
FixNavigation();
$("#home").on("click", function() {
SwitchPage("home")
});
$("#info").on("click", function() {
SwitchPage("info")
});
$("#prices").on("click", function() {
SwitchPage("prices")
});
$("#schedule").on("click", function() {
SwitchPage("schedule")
});
$("#kontacts").on("click", function() {
SwitchPage("kontacts")
});
$("#education").on("click", function() {
SwitchPage("education")
});
});
function SwitchPage(name) {
if (previousPage!=name)
{
$('#'+name).addClass('active');
if(previousPage!=null){
$('#'+previousPage).removeClass('active');
}
previousPage=name;
$("#content-inner").load("pages/"+name+".html");
}
}
function FixNavigation() {
}
</script>
</head>
<body>
<div>
<div class="header">
<div class="header-inner">
</div>
</div>
<div class="tabs">
<div class="tabs-inner">
<ul>
<li><a id="home">Sākums</a></li>
<li><a id="info">Informācija</a></li>
<li><a id="prices">Pakalpojumi un cenas</a></li>
<li><a id="schedule">Darba laiks</a></li>
<li><a id="kontacts">Kontakti</a></li>
<li><a id="education">Izglītība</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="content-inner" id="content-inner">
</div>
</div>
<div class="footer">
<div class="footer-inner">
</div>
</div>
</div>
</body>
这里是我的CSS：
body{
min-width: 960px;
min-height: 100%;
margin: 0;
padding: 0 0 1px;
position: relative;
display: block;
background: #ff8b10 url(images/main_background.jpg) no-repeat;
font: normal normal 18px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #000000;
}
.header{
margin-top: 30px;
height: 300px;
}
.header-inner{
height: 300px;
width: 960px;
margin: 0 auto;
}
.tabs{
margin-top: 30px;
}
.tabs-inner{
width: 900px;
margin: 0 auto;
}
ul {
width: 100%;
background: transparent none no-repeat scroll left;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
line-height: 1.2;
display: table;
table-layout: fixed;
}
li{
border: none;
margin: 0;
padding: 0;
float: left;
text-indent: 0;
display: table-cell;
width: auto;
text-align: center;
}
a{
background-image: url('images/pixel.png');
display: inline-block;
padding: .25em 1em;
font: normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
border-right: 1px solid transparent;
color: #000000;
text-decoration: none;
}
a:hover {
background-color: #ffb267;
color: #660000;
cursor: pointer;
}
.active{
background-color: #ffd7ae;
color: #660000;
}
.content{
margin-top: 30px;
}
.content-inner{
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.footer{
margin-top: 30px;
color: #ff8b10;
height: 100px;
background: #000000 url(images/footer.png) repeat scroll top left;
}
.footer-inner{
}
.home_content{
background: transparent url(images/content.png) repeat scroll top left;
}