Javascript DIV height填充页面的其余部分，使用twist_Javascript_Css_Xhtml_Html

Javascript DIV height填充页面的其余部分，使用twist

javascript css html

Javascript DIV height填充页面的其余部分，使用twist,javascript,css,xhtml,html,Javascript,Css,Xhtml,Html,我如何使一个div扩展它自己的内容来填充现有的空间？结构是这样的（我使用的是960Grid）。如果没有太多内容，我需要DIV1、DIV2、DIV3和DIV4来填充可用的（视口）高度。或者，如果有，DIV1、DIV2、DIV3会使用DIV4内容扩展其高度 +--------------------------------+ | +------------------+ | | | Logo Buttons | | | |

我如何使一个div扩展它自己的内容来填充现有的空间？结构是这样的（我使用的是960Grid）。如果没有太多内容，我需要DIV1、DIV2、DIV3和DIV4来填充可用的（视口）高度。或者，如果有，DIV1、DIV2、DIV3会使用DIV4内容扩展其高度

+--------------------------------+
|      +------------------+      |
|      | Logo    Buttons  |      |
|      |                  |      |
|      +------------------+      |
|================================|
|      +------------------+      |
|      |Title             |      |
|      |                  |      |
|      +------------------+      |
|==============DIV1==============|---  
|      +-------DIV2-------+      |  ^
|      |+DIV3+ +---DIV4--+|      |  |
|      ||    | |         ||      |  |
|      ||Menu| | Content ||      |  |   
|      ||    | |         ||      |  div
|      ||    | |         ||      |  100% of page (not screen) height
|      ||    | |         ||      |  |
|      ||    | |         ||      |  |
|      |+----+ +---------+|      |  |
|      +------------------+      |  v 
|================================|---
|      +------------------+      |
|      |Footer            |      |
|      +------------------+      |
+--------------------------------+

当我不滚动时，一切正常

当我滚动时，主体（绿色）出现

HTML代码：

<body>
    <div id="header">
        <div class="container_16">
            <div id="logo" class="grid_5" onclick="window.location='home.php'">

            </div>
            <div class="grid_3">
                &nbsp;
            </div>

            <div class="botao grid_2 fs5">
                <a href="sobre.php">About</a>
            </div>

            <div class="botao grid_2 fs5">
                <a href="profissao.php">Services</a>
            </div>

            <div class="botao grid_2 fs5">
                <a href="noticias.php">Products</a>
            </div>

            <div class="botao grid_2 fs5">
                <a href="eventos.php">Contact</a>
            </div>
        </div>
    </div><!-- end #header -->

    <div id="page_name">
        <div class="container_16">
            <div id="name" class="grid_16">
                <h1>Title</h1>
            </div>
        </div>
    </div><!-- end #page_name -->

    <div id="top_shadow"></div>

    <div id="page_wrapper">
        <div class="container_16">
            <div id="menu" class="grid_4">
                <ul>
                    <li><a href="">Start</a></li>
                    <li><a href="">We</a></li>
                    <li><a href="">You</a></li>
                    <li><a href="">Us</a></li>
                    <li><a href="">Web</a></li>
                    <li><a href="">ROI</a></li>
                </ul>
            </div><!-- end #menu -->
            <div id="page_content" class="grid_12">
                <div class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu lorem tellus, et posuere lectus. In hac habitasse platea dictumst. Curabitur orci sem, ultrices non consectetur sed, ullamcorper eu magna. Praesent sit amet sollicitudin odio. Donec et urna vel diam pellentesque elementum ut eget lorem. Ut in augue enim, eu varius elit. Aenean quam risus, suscipit in dapibus ut, consequat quis magna. Quisque vulputate vestibulum tempus. Nam tristique tempus mi, a fringilla metus tempor eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla velit nibh, pulvinar id rutrum sed, iaculis non turpis....
                    <div class="clear"></div>
                </div><!-- end .text -->
                <div class="clear"></div>
            </div><!-- end #page_content -->
            <div class="clear"></div>
        </div><!-- end .container_16 -->
        <div class="clear"></div>

    </div><!-- end #page_wrapper -->


    <div id="footer">
        <div class="container_16">
            <div id="news1" class="grid_10">
                <p class="white creditos fs6">© Footer</p>
            </div>

            <div id="apoio" class="grid_6 direita">
                <p class="white creditos fs6">Text</p>
            </div>
        </div>
    </div><!-- end #footer -->              
</body>

尝试给出

body

height:100%

和div1a

minheight:100%

html, body {height: 100%;}

body {
    padding: 0px;
}

.clear { clear: both; }

#header{
    background: url(../images/header_bg.png) repeat-x;
    height: 60px;
    position:relative;
}

#logo{
    margin-top: 10px;
    background:  url(../images/Logo.png) no-repeat;
    height: 40px;
    cursor:pointer;
}

#destaque{
    background:  url(../images/destaque_bg.png) repeat-x;
    height: 330px;
}

#top_shadow{
    background: transparent url(../images/anuncios_bg.png) repeat-x;
    background-position: top;
    height:6px;
    width:100%;
    z-index:800;
    position:relative;
}

#page_name{
    background:  url(../images/destaque_bg.png) repeat-x;
    height: 80px;
    position:relative;
}

#page_name #name{
    margin-top:30px;
}

/*body > #page_wrapper {height:auto;}*/

#page_wrapper{
    background-color: #FFFFFF;
    margin-top:-6px;
    position:absolute;
    top:145px;
    bottom:45px;
    width:100%;
    height:auto;
}


#page_wrapper div.container_16{ 
    background-color: green;
    bottom: 0px;
    left: 50%;
    margin-left: -480px;
    position: absolute;
    top: 0px;
    overflow:visible;
}



#menu{
    background: #fff url(../images/menu_bg.png) right top repeat-y;
    margin: auto;
    height:100%;
    overflow: visible; 
    z-index:10;
    position: relative;
    top: 0;
}

#menu ul{
    list-style-type: none;
    margin-top: 20px;
}

#menu ul li{
    background: transparent url(../images/categoria_separador.png) 5px bottom no-repeat;
    width: 227px;
    height: 40px;
    margin-left: 0px;
    overflow:visible;
}

#menu ul li:hover{
}

#menu  ul li a{
    text-decoration: none;
    display:block;
    font-size:15px;
    color: #000000;

    width: 219px;
    height: 30px;
    padding: 11px 0 0 20px;
    margin-top:-2px;
}

#menu  ul li:hover a{
    background: transparent url(../images/categoria_bg.png) left top scroll;
    color: #FFFFFF;
    overflow:visible;
}


#page_content{
    display:block;
    background-color: blue;

}

#page_content div.text{
    padding:25px 0 0 25px;
}

#anuncios{
    background: #fff url(../images/anuncios_bg.png) repeat-x;
    background-position: top;
    height: 360px;

}

#footer{
    background-color: #000000;
    margin-top: -45px;
    height: 45px;
    clear:both;
    position: fixed;
    width: 100%;
    bottom:0px;
    z-index:999;
}

#shelf{
    background:  url(../images/shelf.png) no-repeat center 147px white;
    height: 192px;
    overflow:visible;
    padding-bottom: 50px;
}


#shelf div.book{
    height: 110px;
    /*background-color:yellow;*/
    margin-top: 0px;
    cursor: pointer;
    position: relative;
}

#shelf div.book a  {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}

/*
#shelf div.book a img:hover{
    -moz-box-shadow: 1px -1px 2px #555;
    -webkit-box-shadow: 1px -1px 3px #999;
    box-shadow: 1px -1px 2px #555;
    margin-bottom:-2px;
}*/

#shelf h2{
    height: 35px;
}

#nba{
    background:  url(../images/news_b_apoios.png) no-repeat;
    background-position: right;
    height: 100px;
}

#eventos, #concursos{
    background:  url(../images/separador.png) no-repeat;
    background-position: right;
}

#eventos, #concursos, #noticias{
    margin-top: 26px;
    height: 298px;
}

#concursos h2{
    margin-left:40px;
}

#concursos div{
    margin-left:30px;
}

#noticias h2{
    margin-left:30px;
}

#noticias div{
    margin-left:20px;
}

.anuncio{
    margin-top: 9px;
    margin-left:-10px;
    height: 120px;
    cursor:pointer;
}

.anuncio:hover{
    background:  url(../images/anuncio_bg.png) no-repeat;
}

#noticia_destaque{
    margin-top:63px;
}

.texto_noticia_destaque{
    line-height: 20px;
    text-align: justify;
    width: 370px;
    margin-top: 30px;
}

#painel{
    background:  url(../images/Painel-de-fotos.png) repeat-x;
    height: 284px;
    margin-top:28px;

}


.botao{
        height: 30px;
        color:#fff;
        margin-top:10px;
        cursor:pointer;
}


.botao:hover{
    background:  url(../images/botao_bg.png) no-repeat;
    background-position: center;
}

.botao a{
        color:#fff;
        text-decoration: none;
}


.creditos{
    margin-top:17px;
}