页脚仅在IE中出现在页面中间

Posted 2021-04-14

我使用此样式信息使页脚停留在网页底部，并且在FF，Chrome和Opera中超级有效。仅在IE中，页脚显示在页面的中间而不是底部。

body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }

#parent 
{
    min-height: 100%;
    position: relative;
}

#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }

#content { padding-bottom: 150px; position: relative; }

#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }

html结构如下：

• HTML正文标签
  • 父母
    • 标题
    • 内容
    • 页脚

更新

我想过，如果我为IE添加条件选择器，则它可以在两种浏览器中使用。

#parent { height: 100%; /* min-height: 100%; */ }

[现在，有人可以告诉我在包含为HTML文件外部文件的.css文件中添加条件CSS注释是否合法？我猜不是。如何在不使用其他仅IE的CSS文件的情况下使用此条件注释？

答案

这应该有所帮助：

html {
height: 100%;
}

查看源代码，然后在任何浏览器上进行尝试：Footer at the bottom of the page。它适用于IE7，IE8和IE9，仅IE6及以下版本不会因为min-height属性而引起。我认为放入正确的DOCTYPE将解决您的问题。希望能有所帮助。

另一答案

几周前我遇到了同样的问题，并且找到了一个很好的教程。 Click here!此解决方案背后的一般想法是创建一个包装程序，该包装程序吸收页面的大部分内容，仅留出足够的空间以使页脚位于页面底部。此技巧绝对适用于IE。

另一答案

它现在可能不再那么重要，因为IE似乎越来越不受欢迎，但是就垂直定位而言，IE唯一能正确识别的就是div。因此，对我而言似乎有用的是将所有元素（包括页脚）强行放入其自己的div中：

<div style={{position: "sticky", top: "0px", zIndex: "10"}} >
    <Nav />
</div>
<div>
    <C {...props} {...cProps} />
</div>
<div style={{marginTop: "20px"}}>
    <Footer />
</div>