2

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

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

我很清楚？

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;
}
4

3 回答 3

0

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

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

解决方法：<br> 用javascript查看客户端浏览器的pixel-height（每个人的显示器可能不一样），然后计算pixel

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

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

于 2013-08-27T19:30:44.893 回答
0

你需要创建一个'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>
于 2013-08-27T19:13:25.113 回答
0

好的...只需复制并粘贴以下这些行 = =

<---javascript开始--->

变量 htmlHeight;

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

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

<---javascript结束--->

在和之间粘贴这些线

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

如果还是不行，试着把javascript放到底部（html里面）
如果还是不行，再学javascript

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

于 2013-08-27T19:57:03.497 回答