Question

我的页面，在大多数情况下，应该将我的页面的主容器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;
}

This

Answer 1

您似乎需要以下CSS：

html,body {
height:100%;
{

您的body只会填写html填充内容，而html似乎不是100％。

Answer 2

我添加了

body, html{
  height: 100%;
}

到您的CSS中，如此框中所示：http://jsbin.com/wefir/1/edit

另请查看此SO帖子以获取更多信息：Make body have 100% of the browser height

如何将主div扩展到完整的浏览器窗口高度？

2 个答案: