如何使用粘性页脚使内部 div 100% 高度？答案

【问题标题】：How to make a inner div 100% height with sticky footer?如何使用粘性页脚使内部 div 100% 高度？
【发布时间】：2013-08-28 04:08:12
【问题描述】：

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

所以我需要 div #main 是 100% 的高度减去页脚的大小（70 像素），而我的 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;
}

【问题讨论】：

如果您可以在 jsfiddle 上创建一个简化的测试用例，那么帮助您编写代码会更容易。
这里是链接：jsfiddle.net/EugRP
根据您的浏览器支持需求，这听起来像是 calc 的工作。 caniuse.com/#search=calc 类似：calc(100% - 70px) 可能满足您的需求
编辑：类似这样的东西：jsbin.com/OQurEFU/2/edit?html,css,output 这就是你要找的东西吗？
是的，类似的东西......你的想法！..

标签： html css

【解决方案1】：

你需要创建一个'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>

【讨论】：

你可以给main一个margin-bottom: 70px;的css声明

【解决方案2】：

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

建议：
设置你的 #main = 95% , #footer = 5%

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

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

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

【讨论】：

javascript？这只是 css 老兄，我不能使用 %，我需要固定高度的#footer。
您可以使用 javascript=,= 更改 CSSstyle

【解决方案3】：

好的...只需将这些行复制并粘贴到下面 = =

var htmlHeight;

htmlHeight = document.getElementById("Page").style.height;

document.getElementById("main").style.height = htmlHeight - 70;

在和之间粘贴这些行

记住，在 >html 中添加一个 id 另外，在您的 >div name="main" 中添加一个 id 控制#main高度的“元素”就是html的高度。
然后，#main = (html 的高度) - 70px

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

虽然 html 是 Web 的主体，但不要忘记 javascript 是 Web 的核心

【讨论】：

我知道...求救！