Question

我有这个页面（http://www.alsite.com.br/angelogarcia/angelogarcia.html）有一个粘性页脚（http://www.cssstickyfooter.com/）。

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

我很清楚？

JSFiddle Link：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;
}

Answer 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>

Answer 2

您的意思是.conteudo =（#main + #footer）= 100％??

建议：
设置#main = 95％，＃footer = 5％

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

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

英语不是我的母语，希望我解释得很好。

Answer 3

好的......只需将这些行复制并粘贴在= =

下面

＆lt; --- javascript开始---＆gt;

var htmlHeight;

htmlHeight = document.getElementById（＆＃34; Page＆＃34;）。style.height;

document.getElementById（＆＃34; main＆＃34;）。style.height = htmlHeight - 70;

＆lt; --- javascript结束---＆gt;

将这些行粘贴在

之间

请注意，为您的＆gt; html＆lt;添加ID （ID =＆＃34;页＆＃34）
另外，为您的＆gt; div name =＆＃34; main＆＃34;＆lt;添加ID （ID =＆＃34;主＆＃34）
＆＃34;元素＆＃34;控制#main高度的是html的高度然后，＃main =（html的高度） - 70px

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

虽然html是您网络的主体，但请不要忘记javascript是网络的核心

如何用粘性页脚制作内部div 100％高度？

3 个答案: