堆栈内存溢出
  简体   繁体   English

DIV高度可以扭曲整个页面

[英]DIV height to fill the rest of the page, with twist

 原文  2011-03-16 17:44:32  8   1    javascript/ css/ xhtml/ html

问题描述

How do I make a div expand with it's own content to fill the existing space ? 如何使div扩展其自身的内容以填充现有空间？ The Structure is this ( I am using 960Grid ). 结构就是这个（我正在使用960Grid）。 I need the DIV1, DIV2, DIV3 and DIV4 to fill the (viewport) Height available, if there is not much content. 如果没有太多内容，我需要DIV1，DIV2，DIV3和DIV4来填充可用的（视口）高度。 Or if there is, that the DIV1, DIV2, DIV3 expand their height with the DIV4 content. 或者，如果存在，则DIV1，DIV2，DIV3随DIV4内容扩展其高度。 

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

When I dont scroll everything is OK 当我不滚动时，一切正常 当我不滚动时，一切正常

When I scroll the body (in Green) appears 当我滚动身体时（以绿色显示） 当我滚动身体时（以绿色显示）

HTML CODE: 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 Code: 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;
}

1 个解决方案

解决方案1
 0  2011-03-16 18:28:06

尝试给body一个height: 100% ，DIV1一个min-height: 100% 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使div填充整个页面的高度 - Make a div fill the whole page in height 角材料布局-填充其余页面的Div - Angular Material Layout - Div to Fill Rest of Page 如何设置最后一个内部div以使用CSS填充其余包装高度？ - How to set the last inner div to fill the rest of the wrapper height with CSS? Div填充剩余高度 - Div fill remaining height 使div填充页面的其余部分（跨浏览器） - Make a div fill the rest of the page (cross-browser) 查找div的休息高度 - Find rest height of div DIV填充剩余高度计算 - DIV fill remaining height calculation 用高度和宽度上的其他div填充div - Fill a div with other div in height and width 画布填充页面的宽度和高度 - Canvas Fill Page Width and Height JavaScript填充页面其余部分不起作用 - JavaScript Fill Rest of Page Not Working
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM