CSS问题 - 页脚太长了？

问题描述：

我在本网站的页脚上遇到了一些问题。我正在寻找它有一个设置的最小高度和流量的页面底部无论分辨率。有点像一个粘脚，但我希望它对接在它上面的容器div的末尾。CSS问题 - 页脚太长了？

这个问题在所有现代浏览器（Safari，Chrome，IE和Firefox）中都是一致的。

太多的CSS在这里发布，但Firebug或视图源将显示相应的样式。任何帮助将不胜感激。在页脚

http://034732e.netsolhost.com/gdlsk_joomla/

你能更具体？我看到一个浅灰色的页脚，里面有一些内容。浅灰色流向页面的底部？你想在哪里？浅灰色底部的文字是？浅灰色区域不那么大？截图会帮助很多=）。 – mrtsherman

页脚大小是问题。在任何浏览器上都是693px。无论多大，我只想将页脚填充到浏览器窗口的底部。 –

http://imgur.com/XOC6c - 这是只有高度设置为150px的页面的镜头。我希望页脚在其他浏览器上将页面的其余部分扩展到底部。不知道为什么它不起作用。 –

答

谢谢你的屏幕截图。你的描述现在更有意义。我会做以下。现在，你有什么样

<body> 
    <page> 
    <header /> 
    <bodycontent /> 
    </page> 
    <footer /> 
<body>

我会考虑这样的事情

<body height: 100%;> 
    <page height: 100%; background: gray;> 
     <header background: black; /> 
     <bodycontent background: black; /> 
     <footer /> 
    </page> 
<body>

基本上我们做的是设置身体和页到100％，这意味着他们采取了整个屏幕。页面使用与页脚相同的bg颜色。最后，我们将header和bodycontent设置为黑色背景，以便它们覆盖Page的灰色。

我喜欢你的想法。我正在考虑使用背景来解决这个问题。问题是该页面上有透明PNG以及需要显示的条纹背景。 –

然后您需要将其重新包装。或使用JavaScript。 CSS没有足够的智能来做你想做的事情。因此，将'page'放入另一个包装中，这个包含灰色背景，然后将您的样式化背景应用于页面。如果你需要整个身体的特色背景，那么我认为你在CSS方面运气不佳。 – mrtsherman

超级黑客奖授予T.谢尔曼先生！谢谢你的提示。不是我正在寻找的理想解决方案，但它的工作原理。在我测试过的所有浏览器中。再次感谢。 –

答

指定100％的高度是没有做什么，你认为它。你告诉它，你希望身高达到身体的100％，它不只是“扩大来填充”剩余的空间。它实际上是100％的高度，加上你添加的其他东西。它实现了150px或更高的最小高度。

我试着将它设置为自动，但它不会流到屏幕的底部。 –

答

尝试这种变化你的CSS：

body > #page { 
height: 100%; 
} 

@#footer: remove-> property top:0; 
add-> property bottom:0;

我试着将它设置为自动但它不会流到屏幕的底部。任何人都可以在大分辨率的显示器上进行确认。 –

我已经编辑了一些更改我的答案，请尝试这一个也。 – punit

@＃页脚：remove-> property top：0; add-> property bottom：0; 这段代码搞乱了我的其余部分。它是否需要以某种方式进行格式化？也许在括号里？ –

答

我有一个类似的问题，它应该是这样的：

HTML

<footer id="wrapper" class="main_footer"> 
    <nav> 
     <a href="#">A</a> 
     <a href="#">B</a> 
     <a href="#">C</a> 
    </nav> 
</footer>

CSS

#wrapper { 
position: absolute; 
width: 100%; 
}

CSS问题 - 页脚太长了？

相关推荐