填充頁面其餘部分的DIV高度，加上扭曲

如何使用自己的內容擴展div以填充現有空間？結構是這樣的（我正在使用960Grid）。如果內容不多，我需要DIV1，DIV2，DIV3和DIV4來填充（視口）高度。或者如果有的話，DIV1，DIV2，DIV3用DIV4內容擴展它們的高度。填充頁面其餘部分的DIV高度，加上扭曲

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

當我不滾動萬事OK When I dont scroll everything is OK

當我滾動體（綠色）出現 When I scroll the body (in Green) appears

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>

CSS代碼：

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; 
}

來源

2011-03-16 Bonfocchi

嘗試給body a height: 100%和DIV1 a min-height: 100%。

來源

2011-03-16 18:28:06 Haochi

沒有解決的情況，我添加了代碼。 – Bonfocchi 2011-03-16 18:36:20

填充頁面其餘部分的DIV高度，加上扭曲

回答

相關問題