Question

我在这里因为我尝试了在本网站上找到的所有内容。无法弄清楚如何制作id =＆＃34;内容＆＃34;尽管我设法让页脚粘在底部，但仍然占据了剩余的高度。

CSS

<style>
html, body {
    margin:0;
    padding:0;
    height:100%;
    position:relative;
    background:transparent url(/Site%201/image/bg/17.jpg) no-repeat top center;background-attachment: fixed;
}
#mainPage {
    width:1099px;
    margin-left: auto;
    margin-right: auto;
    background-color:#fff;
    height:100%;
    position:relative;
}
#header {
    display:table-row;
}
#content {
    padding-bottom:35px;
    background:#FAFAFA;
}
#footer {
    width:100%;
    height:35px;
    position:absolute;
    bottom:0;
    left:0;
    display:table-row;
}
</style>

HTML

<div ID="mainPage" align="center">
    <div id="header">
        <?php 
            $spath = $_SERVER['DOCUMENT_ROOT'];
            $spath .= "/site1/header.html";
            include_once($spath);
        ?>
    </div>
    <div id="content">
    test
    </div>
    <div id="footer">
        <?php 
            $spath = $_SERVER['DOCUMENT_ROOT'];
            $spath .= "/site1/footer.html";
            include_once($spath);
        ?>
    </div>
</div>

（忽略php部分，我把它包含在这里看起来很花哨：DD）

Answer 1

如果您不寻找一般解决方案，这个jquery在这种情况下会有所帮助：

var remHeight;
remHeight=$("#mainPage").height()-$("#footer").height()-$("#header").height();
$("#content").height(remHeight);

如果使用doctype在div之外渲染填充，也可以考虑减少#content padding。

Answer 2

如果页眉和页脚都有固定高度，则可以使用CSS calc函数。

让div取剩余的高度

2 个答案: