我的CSS布局正在变得超过100％的高度，例如JSfiddle给出的示例

我对我的设计弄乱了，它似乎不起作用。

http://jsfiddle.net/etg4k/33/

<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 =主体比页面延伸的延伸。我希望它停在页脚上。

我相信您正在寻找粘性页脚效果，您必须在包装纸中具有与页脚相同的包装器中的元素才能向下推，以使其保持在底部。另外，您必须在包装器的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/

将您的页脚放在包装纸中，例如：

<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％。

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>

态....................

嗨，现在您可以像这样的fixed position

#footer {
    background-color: blue;
    bottom: 0;
    height: 45px;
    left: 0;
    position: fixed;
    right: 0;
}

live demo

相关内容

最新更新

热门标签：