Question

我弄乱了我的设计，似乎没有用。

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
</div>
<div id="footer" > a</div>

body,html
{
 height: 100%;
background-color: #2c2c28;   
}
#header
{
 background-color:red;
    height:45px;
}
#footer
{
    height:45px;
    background-color:blue;

}
#wrapper
{
 height:100%; 
margin-bottom:-45px;   

}
#viewer
{
height:100%;
background-color:yellow;   overflow-y: hidden;  
}
#body
{
    background-color:pink;
 height:100%;   
    overflow-y: hidden;
}
#fader
{
 height:20px;   
}

黄色id = body比页面向下延伸。我希望它停在页脚。

Answer 1

我相信你正在寻找粘性页脚效果，你必须在包装器中有一个与页脚高度相同的元素，以便向下推它以使其保持在底部。你还必须在包装器的CSS中设置一些高度属性。

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div class="push"></div>
</div>
<div id="footer" > a</div>

.push{
    height:45px;
}
#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom:-45px;      
}

http://jsfiddle.net/eTG4K/41/

编辑：

你的问题是你试图给#body 100％的高度，因为它的所有祖先都有100％的高度，#body将具有窗口的高度#wrapper有其他孩子占用空间会导致它溢出。您可以使用边距来解决此问题，但我会考虑重新设计。

#wrapper
{
   margin-bottom:-45px;
}
#body
{
   margin-top:-65px;   
}
#viewer
{
    margin-top:65px;   
}
/* add z-index to #fader and #header so they wont be covered by #body and #viewer */
#fader
{
    position:relative;
    z-index:999;
}
#header
{
    position:relative;
    z-index:999;
}

http://jsfiddle.net/eTG4K/68/

Answer 2

将您的页脚放入包装内，如下所示：

<body>    
    <div id="wrapper">
        <div id="header"></div>
        <div id="fader"></div>
        <div id="body">
            <div id="viewer"></div>         
        </div>
        <div id="footer" ></div>
    </div> 
</body>
</html>

这可以防止身体越过页脚，因为包装和身体的高度设置为100％。

Answer 3

jsfiddle

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div id="footer" > a</div>
</div>

Answer 4

............的 Live Demo ................ ......

您好，现在您可以像{<1}}那样使用

fixed position

的 Live demo 的

我的css布局变得超过100％高度，例如在jsfiddle中给出

4 个答案: