如何将main div扩展到整个浏览器窗口高度？

锡尔诺诺姆兹

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

埃里克·飞利浦（Erik Philips）

看来您需要以下CSS：

html,body {
height:100%;
{

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-18

我来说两句

0 条评论

登录后参与评论

将画布扩展到整个浏览器窗口

如何让div继承浏览器窗口的宽度和高度

CSS div扩展到整个浏览器宽度

如何将main div扩展到整个浏览器窗口高度？

如何将main div扩展到整个浏览器窗口高度？

Linux的官方Adobe Flash存储库是否已过时？

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

错误：“ javac”未被识别为内部或外部命令，

Modbus Python施耐德PM5300

为什么Object.hashCode（）不遵循Java代码约定

如何正确比较 scala.xml 节点？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

在令牌内联程序集错误之前预期为 ')'

数据表中有多个子行，asp.net核心中来自sql server的数据

VBA 自动化错误：-2147221080 (800401a8)

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

如何在JavaScript中获取数组的第n个元素？

检查嵌套列表中的长度是否相同

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

ES5的代理替代

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

如何监视应用程序而不是单个进程的CPU使用率？

如何检查字符串输入的格式

解决类Koin的实例时出错

如何自动选择正确的键盘布局？-仅具有一个键盘布局