Question

我有两个宽度为100％的div。我希望一个人始终掌握所有内容，我希望第二个内容始终位于所有内容的底部。我怎样才能做到这一点？最好是纯CSS，但如果需要，我会尝试jQuery / JS解决方案。

我尝试使用include（“header.php”）添加标题;和header.php只包含标题的HTML代码。但是，它不起作用，但将确切的代码放在包含的地方工作正常。我该如何解决这个问题？

Answer 1

您可以从位置开始：修复并定义顶部和左侧属性或左下角属性。

在您使用时查看CSS sticky footer（不建议使用的链接）。

CSS中引入了一种新的粘性定位。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定直到它到达其父母的边界。使用固定和粘性定位，您可以实现始终位于其他所有内容之上的页眉和页脚。

最终用户可能使用的所有浏览器版本可能无法使用粘性定位。要在旧浏览器中获得粘性页脚，请选中How to make a sticky footer using CSS?

Answer 2

使用位置：固定以及顶部或底部Example。

<head>
    <title>Example</title>
    <style>
#top {
    color: white;
    width: 100%;   
    background-color: black;

    top:0px;
    position: fixed;   
}

#bottom {
    color: white;
    width: 100%;   
    background-color: black; 

    bottom:0px;
    position: fixed;   
}

#content {
    padding-top: 10px;   
}
    </style>
</head>

<body>
    <div id="top">top header</div>

    <div id="content">content</div>

    <div id="bottom">bottom footer</div>
</body>

- 请记住

... Flash应用程序通常会出现在这样的元素上。要解决此问题，请使用objects / embedd中的wmode="transparent"属性。 示例：

<object> <param name="movie" value="example.swf" /> <param name="wmode" value="transparent" /> <embed src="example.swf" wmode="transparent"></embed> </object>

持久性标题＆amp;页脚

2 个答案:

- 请记住