注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

融智技术学院

融智技术学院163分站,为广大好友提供更多的帮助

 
 
 

日志

 
 

【JavaScript每日一问】怎么样扩展一个主要的div到整个浏览器窗口的高度?  

2014-06-13 13:06:13|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

Q

我的网页,在大多数情况下,应该扩展我的页面的主要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;
    }


 

【JavaScript每日一问】怎么样扩展一个主要的div到整个浏览器窗口的高度? - 融智技术学院 - 融智技术学院

 

A

看上去你需要下面的CSS代码:

  • html,body {
    height:
    100%;
    {

你的body标签仅仅填充到html文件,而且html不能呈现到100%

 

温馨提示:您的支持与理解,是我们工作最大的动力。如果您是从网上购买的图书,请在对应的网店,给予本书一个好评,我们将衷心感谢!!!
以下是HTML+CSS网页设计详解对应的购书评论地址:
当当网:http://product.dangdang.com/23423206.html
亚马逊:http://www.amazon.cn/dp/B00IICLL8W
京东网:http://item.jd.com/11406922.html

  评论这张
 
阅读(58)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017