0

我正在构建一个网站，我在其中使用 PHP 包含页眉和页脚。页脚的位置是动态的，基于页面的高度。所以有时页脚在我的浏览器页面的 3/4 处，底部有一个很大的空白区域。我的页脚容器的背景是纯色 (#333)。

有没有办法设置这个并且只有这个页面有背景颜色？

我试图在页脚页面上包含背景颜色 css 代码，但它适用于整个页面，而不仅仅是作为包含的一部分加载的页脚页面。

或者是否有一个 CSS 技巧来设置我的页脚容器 div 的高度等于页面加载时浏览器窗口的剩余高度？这可能是最好的方法...

帮助将不胜感激！

4

3 回答 3

0

尝试

索引.php

<div style="backgroun-color:red;">
    <?php
        include('footer.php')
    ?>
</div>

页脚.php

<p>Hello</p>
于 2013-03-09T04:34:39.460 回答
0

不，您必须使用 javascript 来制作具有动态高度的粘性页脚。CSS 无法适应变化（媒体查询除外，但这会很快变得混乱）。

工作演示

所以基本上，你设置了传统的粘性页脚（使用推送）。然后将页脚的高度应用于推送，并作为换行的负底部边距。

为了完成这项工作，必须将所提供结构之外的所有具有高度的元素添加到 jQuery 方程中。

最后，if (contentH < adjustedHeight)如果内容已经将页面拉伸到超过屏幕的高度，它将不会触发。

快乐编码！

于 2013-03-09T04:44:08.310 回答
0

我做了一些研究，发现了我正在寻找的 CSS“技巧”。我基本上设置了一个错觉并修改了我的 CSS 以及它如何处理背景颜色样式。

http://jsfiddle.net/fXf4K/

<body>
    <section id="container">
    <header>This is your header</header>
    <section id="main">This is #main</section>
    <footer>This is your footer</footer>
    </section>
</body>

---------

body {background:#999;}
#container {background:#ff0;width:100%;}
header {}
#main {}
footer {background:#999;}
于 2013-03-09T14:31:52.610 回答