如何使用粘性页脚使内部div达到100%高度

我有这个页面(http://www.alsite.com.br/angelogarcia/angelogarcia.html)有一个粘脚的(http://www.cssstickyfooter.com/)。

所以我需要div #main是100%的高度减去页脚的大小（70px），而我的div .conteudo是与div #main相同的大小，也是100%的高度。我设置的颜色很容易看到会发生什么

我明白了吗？

JSFiddle链接：http://jsfiddle.net/EugRP/

结构为：

<body>
<div id="wrap">
    <div class="main">
        <div class="sidebar"></div>
        <div class="conteudo"></div>
    </div>
</div>
<div id="footer"></div>
</body>

我的CSS:

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}
#main {
    width:100%;
    min-width: 960px;
    margin: 0 auto;
        background: #FFCC00;
    padding-bottom: 70px; /* must be same height as the footer */
}
#footer {
    position: relative;
    margin-top: -70px; /* negative value of footer height */
    height: 70px;
    clear:both;
}
.conteudo{
    padding:0 15px;
    width:60%;
    margin-left: 30px;
    background: #000000;
    background:rgba(255,0,0,0.8);
    text-align: justify;
    font-size: 16px;
    letter-spacing: 0.8px;
}

您需要创建一个"spacer"div

CSS

#spacer {
    height: 100px; // same height as footer
}
.main {
    height: 100%;
}

HTML

<body>
<div id="wrap">
    <div class="main">
        <div class="sidebar"></div>
        <div class="conteudo"></div>
    </div>
</div>
<div id="spacer"></div>
<div id="footer"></div>
</body>

您的意思是.conteudo=（#main+#footer）=100%吗？？

建议：
设置您的#main=95%，#footer=5%

解决方案：
使用javascript检查客户端浏览器的像素高度（每个人的显示器可能不一样）然后只计算像素

但如果你不知道javascript是如何工作的，那就自己学吧，谷歌是有用的。

英语不是我的母语，希望我解释清楚。

好的。。。只需复制并粘贴下面的这一行即可==

&lt---javascript启动--->

var htmlHeight；

htmlHeight=document.getElementById（"Page"）.style.height；

document.getElementById（"main"）.style.height=htmlHeight-70；

&lt---javascript结束--->

在和之间粘贴这些行

请记住，在>html<（id="Page"）
此外，在>div name="main"<（id="main"）
控制#main高度的"元素"是html的高度
然后，#main=（html的高度）-70px

如果不起作用，请尝试将javascript放在底部（html内部）
如果同样失败，请学习javascript

尽管html是web的主体，但不要忘记javascript是web 的核心

相关内容

最新更新

热门标签：