在大多数情况下，我的页面应该将我页面的主容器 div 扩展到窗口的整个高度，尽管我一定遗漏了一些东西，因为我相信所有需要的正确 CSS 元素都存在。任何帮忙？
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Programming Languages Concept Home</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="Script/jquery.js"></script>
<script src="Script/main.js"></script>
<noscript>Your browser has javascript disabled, please turn it on then refresh to take full advantage of this site</noscript>
</head>
<body>
<div id="header"><h1 class="headover">Home.</h1>
<div class="nav">
<ul class="navigation">
<li><a href="home.html">Home</a></li>
<li><a href="gs4/home.html">Object Or.</a>
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">ATT</a></li>
<li><a href="#">Sprint</a></li>
<li><a href="#">T-Mobile</a></li>
<li><a href="#">International</a></li>
</ul>
</li>
<li><a href="gs4/home.html">Array</a>
<ul>
<li><a href="gs4/verizon.html">Verizon</a></li>
<li><a href="#">ATT</a></li>
<li><a href="#">Sprint</a></li>
<li><a href="#">T-Mobile</a></li>
<li><a href="#">International</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container"><br><br><br><p style="color:#666; margin-left:10px; margin-right:10px; text-align:center; text-indent:5px; font-size:24px;"><b>Programming has many faces and names. Java, C++, Perl, HTML, are all languages that can be used to program, to solve a problem that the programmer needs to solve. The tools in a programmers tool book are the languages he knows, all with different syntax, and different ways of going about to reach a solution. Whether the programmer uses the easiest language, or the one he is most familiar with, it is all personal choice. Find all the history and information about any programming language right here to help you pick the language that best suits you.</b></p>
<!--<button>Screenshots</button>
<p id="hide">Pretend these are some images yo.</p>-->
</div>
</body>
</html>
CSS:
body {
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
min-height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
margin:0;
margin-bottom:-1px;
}
.headover{
color:#333;
float:right;
}
.headover:hover{
color:white;
}
#gfamily{
margin:auto;
margin-bottom:0px;
padding-bottom:0px;
}
#header{
position:fixed;
text-align:center;
background-color:#666;
margin:auto;
width:100%;
height:54px;
display:block;
min-width:1000px;
}
#container{
background-color:#FFF;
margin:auto;
width:70%;
min-height:100%;
margin-bottom:-1px;
}
.nav{
margin-left:5px;
text-align:center;
background-color:#999;
}
.navigation {
position:fixed;
display:block;
margin-top:15px;
padding:0;
list-style:none;
}
.navigation li {
float:left;
width:150px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#666;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:1px solid #FFF;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px solid #FFF;
}
.navigation ul a:hover {
color:#666;
}
#hide{
display:none;
}
#extlink{
color:#666;
}
#extlink:hover{
color:#333;
}
#pics:hover{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:white;
background-color:#666;
border:none;
}
#pics{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#666;
background-color:white;
border:none;
}
最佳答案
看来您需要以下 CSS:
html,body {
height:100%;
{
您的 body 只会填充 html 填充的内容，而 html 似乎不是 100%。
关于javascript - 如何将主 div 扩展到完整的浏览器窗口高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22773690/